flex怎么用，常用属性有哪些？

flex布局 规定了元素如何伸长或缩短以适应容器中的空间，灵活性很高，有以下常用属性

1、flex-grow,指定了该项占容器中剩余空间的多少
html

<div id="content">
  <div class="box" style="background-color:red;">A</div>
  <div class="box" style="background-color:lightblue;">B</div>
  <div class="box" style="background-color:yellow;">C</div>
  <div class="box1" style="background-color:brown;">D</div>
  <div class="box1" style="background-color:lightgreen;">E</div>
  <div class="box" style="background-color:brown;">F</div>
</div>

css

#content {
  display: flex;
}
.box {
  flex-grow: 1;
  border: 3px solid rgba(0,0,0,.2);
}
.box1 {
  flex-grow: 2;
  border: 3px solid rgba(0,0,0,.2);
}

flex-grow

2、

flex-direction:row
               row-reverse
               colum
               colum-reverse

This is a Row
This is a Row-Reverse
This is a Column
This is a Column-Reverse

3、

flex-wrap:nowrap //默认初始值
          wrap
          wrap-reverse

nowrap
wrap
wrap-reverse

4、

justify-content:flex-start //默认初始值,左对齐
                flex-end//右对齐
                center//居中
                space-between//两端对齐，项目之间的间隔都相等。
                space-around//每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

justify-content

5、

align-items:flex-start
            flex-end
            center
            baseline//项目的第一行文字的基线对齐
            stretch//默认值，项目未设置高度或设为auto，将占满整个容器的高度。

flex-start
flex-end
center
baseline
stretch