百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

flex和垂直居中

作者牛广杨课程第七天到第八天:学习布局724次浏览12018-05-10 00:16

flex

  • 主轴(main axis)是沿着 flex 元素放置的方向延伸的轴(比如页面上的横向的行、纵向的列)。该轴的开始和结束被称为 main start 和 main end。
  • 交叉轴(cross axis)是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。
  • 设置了 display: flex 的父元素(在本例中是 <section>)被称之为 flex 容器(flex container)。
  • 在 flex 容器中表现为柔性的盒子的元素被称之为 flex 项(flex item)(本例中是 <article> 元素。
    flex-direction
    指定主轴的方向(弹性盒子子类放置的地方)— 它默认值是 row,这使得它们在按你浏览器的默认语言方向排成一排(在英语/中文浏览器中是从左到右)。
    flex-direction: column
    你会看到,这会将那些元素设置为列布局,就像我们添加这些 CSS 之前。
    ps:你还可以使用 row-reverse 和 column-reverse 值反向排列 flex 项目。
    flex-wrap
    任何溢出的元素将被移到下一行
    flex项的动态尺寸
    article {
    flex: 1;
    }
    
    这是一个无单位的比例值,表示每个 flex 项沿主轴的可用空间大小。本例中,我们设置 <article> 元素的 flex 值为 1,这表示每个元素占用空间都是相等的,占用的空间是在设置 padding 和 margin 之后剩余的空间。
article:nth-of-type(3) {
  flex: 2;
}

你会看到第三个 <article> 元素占用了两倍的可用宽度和剩下的一样 — 现在总共有四个比例单位可用。 前两个 flex 项各有一个,因此它们占用每个可用空间的1/4。 第三个有两个单位,所以它占用2/4或这说是1/2的可用空间。

article {
  flex: 1 200px;
}

article:nth-of-type(3) {
  flex: 2 200px;
}

表示“每个flex 项将首先给出200px的可用空间,然后,剩余的可用空间将根据分配的比例共享“。
flex水平和垂直对齐
align-items

控制 flex 项在交叉轴上的位置。

  • 默认的值是 stretch,其会使所有 flex 项沿着交叉轴的方向拉伸以填充父容器。如果父容器在交叉轴方向上没有固定宽度(即高度),则所有 flex 项将变得与最长的 flex 项一样长(即高度保持一致)。我们的第一个例子在默认情况下得到相等的高度的列的原因。
  • 在上面规则中我们使用的 center 值会使这些项保持其原有的高度,但是会在交叉轴居中。这就是那些按钮垂直居中的原因。
  • 你也可以设置诸如 flex-start 或 flex-end 这样使 flex 项在交叉轴的开始或结束处对齐所有的值。查看 align-items 了解更多。
    justify-content
    控制 flex 项在主轴上的位置。
  • 默认值是 flex-start,这会使所有 flex 项都位于主轴的开始处。
  • 你也可以用 flex-end 来让 flex 项到结尾处。
  • center 在 justify-content 里也是可用的,可以让 flex 项在主轴居中。
  • 而我们上面用到的值 space-around 是很有用的——它会使所有 flex 项沿着主轴均匀地分布,在任意一端都会留有一点空间。
  • 还有一个值是 space-between,它和 space-around 非常相似,只是它不会在两端留下任何空间。
    flex项排序
    button:first-child {
    order: 1;
    }
    
  • 所有 flex 项默认的 order 值是 0。
  • order 值大的 flex 项比 order 值小的在显示顺序中更靠后。
  • 相同 order 值的 flex 项按源顺序显示。所以假如你有四个元素,其 order 值分别是2,1,1和0,那么它们的显示顺序就分别是第四,第二,第三,和第一。
  • 第三个元素显示在第二个后面是因为它们的 order 值一样,且第三个元素在源顺序中排在第二个后面。

    垂直居中

    垂直居中,首先设定两个条件即父元素是盒子容器且高度已经设置。
    场景1:子元素是行内元素,高度是由其内容撑开的
    这种情况下,需要通过设定父元素的line-height为其高度来使得子元素垂直居中
    场景2:子元素是块级元素但是子元素高度没有设定,在这种情况下实际上是不知道子元素的高度的,无法通过计算得到padding或margin来调整,但是还是存在一些解法。
    通过给父元素设定display:table-cell;vertical-align:middle来解决
    场景3:子元素是块级元素且高度已经设定
    计算子元素的margin-top或margin-bottom,计算方法为父(元素高度-子元素高度)/2

    bfc两列式布局

    <div class="wrapper" id="wrapper">
    <div class="left">
      左边固定宽度,高度不固定 </br> </br></br></br>高度有可能会很小,也可能很大。
    </div>
    <div class="right">
      这里的内容可能比左侧高,也可能比左侧低。宽度需要自适应。</br>
      基本的样式是,两个div相距20px, 左侧div120px
    </div>
    </div>
    

下面这种方法是不需要计算的,只需要设置两个盒子之间的间隔。

.wrapper-float-bfc {
    overflow: auto;
}

.wrapper-float-bfc .left {
    float: left;
    margin-right: 20px;
}

.wrapper-float-bfc .right {
    margin-left: 0;
    overflow: auto;
}

这个方案同样是利用了左侧浮动,但是右侧盒子通过overflow: auto;形成了BFC,因此右侧盒子不会与浮动的元素重叠。

0条评论