css笔记 四.flex布局

说明

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。
注意

设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

设置在子元素上的属性

1.flex-grow:number (放大)

使用本属性会让flex盒子按所填写的比例占据父节点剩余的空间

 .p{
     width : 600px;
     height : 100px;
     display:flex;
 }
 .item{
     width:100px;
     flex-grow:1;
 }

 <div class = "p">
     <div class = "item"></div>
     <div class = "item"></div>
     <div class = "item"></div>
 </div>

 <!-- 三个div的宽度都为200px,按比例平分父元素空间-->

2.flex-shrink:number(缩小)

会让flex盒子按所填写的比例砍掉父节点不足的空间

  .p{
      width : 300px;
      height : 100px;
      display:flex;
  }
  .item{
      width:200px;
      flex-grow:1;
  }

  <div class = "p">
      <div class = "item"></div>
      <div class = "item"></div>
      <div class = "item"></div>
  </div>
  
  <!--
      三个div的宽度都为100px,按照子节点的大小,
      父节点应该长度为600px,缺少300px,
      缺失的部分,按比例均摊到各子节点中
  -->

3.flex-basis(基准值)

盒子占主轴方向上的大小

权重比width,height等要高

主轴方向是行时,该值就是宽度的大小
主轴方向是列时,该值就是高度的大小

4.flex(简写方式)

是flex-grow , flex-shrink , flex-basis三种属性的简写

常用简写方式 flex : 1(flex-grow) 2(flex-shrink) 50%(flex-basis);

5.order:number(排序)

填写的值越小,排序时越靠前,默认值为0

6.align-self(对齐方式)

权重比align-items高

常用对齐方式:

属性值	效果
auto	默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”。
stretch	元素被拉伸以适应容器。如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
center	位于容器的中心。在侧轴上居中放置。
flex-start	位于侧轴的起始位置。
flex-end	位于侧轴的结束边界。
baseline	位于容器的基线上。如行内轴与侧轴为同一条与’flex-start’等效。否则将与基线对齐

设置在父元素上的属性

1.flex-direction(元素排列方式)

属性值	效果
row	默认值。水平显示，正如一个行一样。
row-reverse	与 row 相同，但是以相反的顺序。
column	垂直显示，正如一个列一样.
column-reverse	与 column 相同，但是以相反的顺序。

2.flex-wrap(换行)

属性值	效果
wrap	超出换行
wrap-reverse	反方向换行
nowrap	默认值.超出不换行

3.flex-flow(简写)

是flex-direction与flex-wrap的简写形式

flex-flow:row(lex-direction) wrap(flex-wrap)

4.justify-content(主轴上的排列方式)

属性值	效果
flex-start	默认值。项目位于主轴方向的开头.
flex-end	项目位于主轴方向的结尾。
center	项目位于主轴方向的中心。
space-between	项目位于主轴之间留有空白的容器内。
space-around	项目位于各行之前、之间、之后都留有空白的容器内。

space-between

eg:边界 (元素一)空白 空白(元素二)空白 边界

space-around

eg:边界 空白(元素一)空白 空白(元素二)空白 边界

5.align-items(元素在侧轴上的排列方式)

属性值	效果
flex-start	默认值。项目位于侧轴方向的开头.
flex-end	项目位于侧轴方向的结尾。
center	项目位于侧轴方向的中心。
space-between	项目位于侧轴之间留有空白的容器内。
space-around	项目位于各行之前、之间、之后都留有空白的容器内。

space-between

eg:边界 (元素一)空白 空白(元素二)空白 边界

space-around

eg:边界 空白(元素一)空白 空白(元素二)空白 边界

6.align-content(多根轴线的对齐方式)

如果项目只有一根轴线，该属性不起作用

属性值	效果
flex-star	与交叉轴的起点对齐。
flex-end	与交叉轴的终点对齐。
center	与交叉轴的中点对齐。
space-between	与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around	每根轴线两侧的间隔都相等。
stretch	默认值,轴线占满整个交叉轴。