CSS

Flex布局

Flex布局

Posted by limantang on October 16, 2019

Flex布局

Flex基本概念

  1. Flex容器内存在两条轴, 水平主轴(main axis), 竖直的交叉轴(cross axis) 这两条主轴的方向可以通过设置交换
  2. 容器内的每个单元称之为flex item

Flex容器

实现Flex布局首先需要指定一个容器, 这样容器内部的元素就可以使用Flex来进行布局

.container {
	display: flex | inline-flex;
}

如果使用块元素就使用flex 如果使用行内元素就使用inline-flex 需要注意: 当设置Flex布局之后, 子元素的float, clear, vertical-align都会失效

容器可以设置下面6种属性:

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content
  1. flex-direction 决定主轴方向(元素的排列方向)
     .container {
        flex-direction: row | row-reverse | column | column-reverse;
     }
    

    row: 默认值 主轴水平方向, 起点在左端

    row: 主轴水平, 起点在右端

    column: 主轴竖直, 起点在上

    column-reverse: 主轴竖直, 起点在下

  2. flex-wrap 容器内元素是否可以换行
     .container {
         flex-wrap: nowrap | wrap | wrap-reverse;
     }
    

    nowrap: 默认值 不换行 当主轴空间不足时 子元素会动态调整大小而不会挤到下一行

    wrap: 子元素主轴总尺寸超出容器时, 第一行在上方

    wrap-reverse: 换行, 第一行在下

  3. flex-grow: flex-direction和flex-wrap的简写

  4. justify-content: 定义了子元素在主轴的对齐方式
     .contianer {
         justify-content: flex-start | flex-end | center | space-between | space-around;
     }
    

    flex-start: 默认值, 左对齐

    flex-end: 右对齐

    flex-center: 居中

    flex-between: 两端对齐, 子元素之间间隔相等

    space-around: 每个子元素两侧的间隔相等

  5. align-items: 定义了子元素在交叉轴上的对齐方式
     .container {
         .align-items: stretch | flex-start | flex-end | center | baseline;
     }
    

    stretch: 默认值, 如果子元素未设高度或者设置为auto ,子元素将充满容器高度

    flex-start: 交叉轴的起点对齐

    flex-end: 交叉轴的终点对齐

    center: 交叉轴的中点对齐

    baseline: 子元素的第一行文字的基线对齐

  6. align-content: 定义了多跟轴线的对齐方式, 如果子元素只有一根轴线, 这个属性无效
     .container {
         align-content: flex-start | flex-end | center | sapce-between | sapce-around;
     }
    

    可以这样理解:

    当flex-wrap: nowrap时容器只有一根轴线, 子元素不会换行, 就不会产生多根轴线

    当flex-wrap: wrap时, 子元素可以换行, 业绩是说可能会存在多行, 就可能会有多根轴线

Flex子元素

有6种属性可以设置在子元素上

  • oerder
  • flex-basis
  • flex-grow
  • flex-shrink
  • flex
  • align-self
  1. order定义了子元素在容器中的排列顺序, 数值越小越靠前, 默认值为0

  2. flex-basis: 定义了在分配多余空间之前, 子元素占据的主轴空间, 浏览器根据这个属性, 计算主轴是否有多余空间
      .item{
          flex-basis: <length> | auto;
      }
    

    默认值为auto, 就是项目原本的大小, 这时子元素的宽高取决于width或者height 当主轴为水平方向时, 当设置了flex-basis,子元素的宽高值会失效, flex-basis需要跟flex-grow和flex-shrink配合使用才能发挥效果

    当flex-basis为0%时, 是把子元素视为零尺寸, 即使声明了尺寸为140px也是没用的 当flex-basis为auto时, 是根据子元素设定的尺寸

  3. flex-grow: 定义了子元素的放大比例 默认值为0, 即如果存在剩余空间也不放大 当所有的子元素都以flex-basis的值进行排列之后, 还有剩余空间, 这时flex-grow就会生效 如果所有子元素的flex-grow都为1的话, 则他们将等分剩余空间(如果有的话) 如果其中一个子元素的flex-grow为2 其余都为1的话, 那么该元素占据的剩余空间比其他的大一倍

  4. flex-shrink 定义了子元素缩小的比例 默认值为1 如果一个子元素的flex-shrink为0时, 其余元素都为1, 当空间不足时, 该元素不会缩小
  5. flex是 flex-grow, flex-shrink, flex-basis的缩写
  6. align-self: 允许单个子元素有与其他子元素不一样的对齐方式

    auto: 默认值 继承容器的align-items属性

    align-slef是对单个子元素生效的

    align-items是对容器内所有的子元素生效的