CSS flex

CSS flexible Box Layout 弹性盒模型

针对用户界面设计进行了优化，弹性容器的子元素可以在任何方向上排布。元素可以弹性伸缩。

从而使子元素可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免父元素溢出，更好的适应父元素的大小。

flex优点：1.便于对齐元素。

.box {
        /*定义一个flex contianer*/
	display: flex;
        /*定义主轴方向，row为主轴（行，自上向下），则column为交叉轴*/
        flex-direction:row
}

container和主轴属性

display:flex/inline-flex

display定义一个flex container。container内所有子元素成为flex items。

flex-direction:row/column/row-reverse/column-reverse

flex-direction:定义主轴方向，与主轴垂直的轴，称之为交叉轴。

控制对齐的属性

justify-content: 控制所有元素在主轴上的对齐方式

align-items:控制所有元素在交叉轴上的对齐方式

align-self : 控制交叉轴上的单个flex item的对齐

align-content : 控制“多条主轴”的flex items在交叉轴的对齐

flex items（子元素）属性，

flex-grow,flex-shrink 可以当作元素填充或收缩的速度大小。

flex-grow：(如果有多余空间）0，不填充多余空间;正数，按照各子元素的flex-grow数值比例，分配多余空间，进行填充。

（eg：三个子元素，第一个子元素flex-grow=2,第二个、第三个子元素flex-grow=1, 则多余空间的1/2会被分配给第一个子元素）

flex-shrink:(如果空间不足）0，不收缩尺寸;正数，按照各子元素的flex-shrink数值比例，收缩不同倍数的尺寸。

flex-basis:子元素的初始尺寸。

默认为auto。如果值为auto，则浏览器首先检查当前元素是否有一个绝对尺寸属性（width/height)设置，如果有，则使用该绝对尺寸作为flex-basis值。如果当前元素是自适应尺寸（auto-sized），则使用max-content属性尺寸作为该元素大小。即根据该元素内容需要多少空间，就分配多大空间给该元素。如果元素内容为空，则分配的空间大小就是0了。

flex-grow，flex-shrink，flex-basis可缩写为flex属性。

flex:initial = flex: 0 1 auto

flex: auto = flex: 1 1 auto

flex:none = flex : 0 0 auto

典型应用场景

1.导航栏 方便控制元素对齐空间

nav ul {
  display: flex;
}

nav li {
  flex: auto ;
}

2.元素居中

.box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.box div {
   100px;
  height: 100px;
}

<div class="box">
  <div></div>
</div>

3.固定位于container底部的footer元素

.card {
    display: flex;
    flex-direction: column;
}

.card .content {
    flex: 1 1 auto;
}

<div class="cards">
    <div class="card">
        <div class="content">
            <p>This card doesn't have much content.</p>
        </div>
        <footer>Card footer</footer>
    </div>
    <div class="card">
        <div class="content">
            <p>This card has a lot more content which means that it defines the height of the container the cards are in. I've laid the cards out using grid layout, so the cards themselves will stretch to the same height.</p>
        </div>
        <footer>Card footer</footer>
    </div>
</div

不论content内容多少，content自动填充多余空间，footer始终位于container底部。

4.多媒体元素（我不常用）

5.表单控制

.wrapper {
  display: flex;

}

.wrapper input[type="text"] {
    flex: 1 1 auto;
  }

<form class="example">
        <div class="wrapper">
            <label for="text">Label</label>
            <input type="text" id="text">
            <input type="submit" value="Send">
        </div>
</form>
      

参考

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout