CSS flex 弹性布局

1 父级容器属性:

1.1 display属性

- 块级元素使用：

display：flex

- 行级元素使用：

display: inline-flex

- webkit浏览器：

display: -webkit-flex

注意：设置为弹性布局后，子元素的float、clear和vertical-align属性将失效

1.2 flex-direction

设置容器主轴方向

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

row:默认值水平方向从左到右排列       row-reverse: 水平方向从右到左排列

 

 column: 垂直方向从上到下排列         column-reverse：垂直方向由下到上

 

 

1.3 flex-wrap

设置容器内元素换行

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

nowrap: 不换行(此时容器宽度失效)    wrap: 正常位置换行

wrap-reverse: 尾部元素向上换行

 

1.4 flex-flow

flex-direction和flex-wrap属性的简写，默认值为[row nowrap]

第一个属性是flex-direction的属性值

第二个属性是flex-wrap的属性值

1.5 justify-content

设置容器内的对齐方式

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

flex-start: 默认向左对齐                      flex-end：向右对齐

 center：居中对齐                             space-between: 两端对齐子元素等间距与容器边框无间隔

 space-around: 每个子元素两侧的间隔相等，子元素之间的间隔大一倍

 

1.6 align-items

align-items属性定义在垂直容器方向上的对齐方式

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

注意：这里的父级容器要给定高度才会生效。

flex-start: 垂直方向自上而下               flex-end: 垂直方向自下而上

 center：垂直方向的中点对齐            baseline：与第一个子元素中文字的基线对齐

 stretch: 默认值，如果子元素没有设置高多或者auto，则占满整个容器

 

1.6 align-content

.flex-box {
  display: flex;
  align-content：flex-start | flex-end | center | space-between | space-around | stretch
}

flex-start: 当容器方向子元素刚好填满，与垂直方向

flex-end: 当容器方向子元素刚好填满，与垂直方向的终点对齐

center：当容器方向子元素刚好填满时，垂直方法两端对齐

space-between: 当容器方向子元素刚好填满时，与垂直方向的两端对齐

space-around: 两个方向两侧的间隔都相等。

stretch：占满整个垂直方向

2 元素属性

2.1 order

order属性定义了子元素的排列顺序，数值小的在前

order: <integer>;

.flex-box {
  display: flex;
}
.item1 {
  order: 2;
}

 

2.2 flex-grow

当给所有子元素设置该属性为1，那么将等分所有空间，如果单独给某一个子元素设置n倍，那么该子元素将占据的空间比其他子元素多n倍

flex-grow: <number>; /* default 0 */}

.flex-box {
  display: flex;
}
.item1 {
  flex-grow: 2;
}

 

2.3 flex-shrink

flex-shrink属性定义了子元素的缩小比例，默认值为1。

flex-shrink: <number>; /* default 1 */}

2.4 flex-basis

该属性定义了给子元素分配空间时其占据的空间为多少，可以设置为与其width和height属性一样的值，那么它将被分配固定的空间大小

2.5 flex

该属性为flex-grow, flex-shrink 和 flex-basis的简写

2.6 align-self

该属性允许设置过的子元素有与其他子元素不一样的对齐方式，可以覆盖align-items属性

align-self: auto | flex-start | flex-end | center | baseline | stretch;

auto：表示默认继承父级的align-items属性

flex-start：垂直方向的起点对齐

flex-end：垂直方向的终点对齐

center：垂直方向的中点对齐

baseline: 与第一个子元素中文字的基线对齐

stretch(默认值)：如果子元素没有设置高度或者高度设为auto，那么它将占满整个容器的高度

.flex-box {
  display: flex;
}
.item1 {
  align-self: flex-start;
}
.item2 {
  align-self: flex-end;
}
.item3 {
  align-self: center;
}
.item4 {
  align-self: baseline;
}
.item5 {
  align-self: stretch;
}