CSS3 弹性盒子(Flex Box)

时间 2020-12-31

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

justify - content : flex - start | flex - end | center | space - between | space - around

align-content: flex-start | flex-end | center | space-between | space-around | stretch

各个值解析:

stretch - 默认。各行将会伸展以占用剩余的空间。

flex-start - 各行向弹性盒容器的起始位置堆叠。
flex-end - 各行向弹性盒容器的结束位置堆叠。
center -各行向弹性盒容器的中间位置堆叠。
space-between -各行在弹性盒容器中平均分布。
space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

CSS3 弹性盒子属性

下表列出了在弹性盒子中常用到的属性:

属性	描述
display	指定 HTML 元素盒子类型。
flex-direction	指定了弹性容器中子元素的排列方式
justify-content	设置弹性盒子元素在主轴（横轴）方向上的对齐方式。
align-items	设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
flex-wrap	设置弹性盒子的子元素超出父容器时是否换行。
align-content	修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
flex-flow	flex-direction 和 flex-wrap 的简写
order	设置弹性盒子的子元素排列顺序。
align-self	在弹性子元素上使用。覆盖容器的 align-items 属性。
flex	设置弹性盒子的子元素如何分配空间。

   <!DOCTYPE html>  <html>  <head>  <meta charset="utf-8">   <title>菜鸟教程(runoob.com)</title>   <style>   .flex-container {      display: -webkit-flex;      display: flex;      -webkit-justify-content: flex-end;      justify-content: flex-end;      width: 400px;      height: 250px;      background-color: lightgrey;  }  .flex-item {      background-color: cornflowerblue;      width: 100px;      height: 100px;      margin: 10px;  }  </style>  </head>  <body>  <div class="flex-container">    <div class="flex-item">flex item 1</div>    <div class="flex-item">flex item 2</div>    <div class="flex-item">flex item 3</div>    </div>  </body>  </html>  
 