css之flex布局

一、flex布局

        Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

二、基本概念

2.1 主轴和交叉轴

        采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。

        容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。项目默认沿主轴排列。

2.2 contianer属性

    2.2.1  flex-direction

   flex-direction属性决定主轴的方向,默认是row，水平从左到右排列

 .box {
   flex-direction: row | row-reverse | column | column-reverse;
 }

2.2.2  flex-wrap

      默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

 .box{
   flex-wrap: nowrap | wrap | wrap-reverse;
 }

wrap-reverse : 换行，第一行在下方。

2.2.3  justify-content

  justify-content属性定义了项目在主轴上的对齐方式。

 .box {
   justify-content: flex-start | flex-end | center | space-between | space-around;
 }

space-between 两端对齐，项目之间的间隔都相等

2.2.4 aligin-items

 .box {
   align-items: flex-start | flex-end | center | baseline | stretch;
 }

stretch: 如果项目未设置高度或设为auto，将占满整个容器的高度

2.3 item属性

2.3.1 flex-grow

   flex-grow 剩余空间处理

• 剩余空间：x
• 假设有三个flex item元素，flex-grow 的值分别为a, b, c
• 每个元素可以分配的剩余空间为： a/(a+b+c) * x，b/(a+b+c) * x，c/(a+b+c) * x

2.3.2 flex-shrink

   flex-shrink 溢出空间处理

• 三个flex item元素的width: w1, w2, w3
• 三个flex item元素的flex-shrink：a, b, c
• 计算总压缩权重： sum = a * w1 + b * w2 + c * w3
• 计算每个元素压缩率： S1 = a * w1 / sum，S2 =b * w2 / sum，S3 =c * w3 / sum
• 计算每个元素宽度：width - 压缩率 * 溢出空间