弹性盒子flex(二) 弹性容器(Flex container)的属性

• flex-flow 属性是 flex-direction 和 flex-wrap 的简写

语法： flex-flow : <'flex-direction'> || <'flex-wrap'>

• flex-direction 属性定义了主轴的方向

语法:  flex-direction : row | row-reverse | column | column-reverse 

　　效果极其每个属性值的作用：

item1

item2

item3

 

flex-direction: row;

 

row(默认值)：主轴为水平方向，起点在左端，子项目从左到右排列。

item1

item2

item3

 

flex-direction: column;

 

column：主轴为垂直方向，起点在上边，子项目从上到下排列。

item1

item2

item3

 

flex-direction:row-reverse;

 

row-reverse：主轴为水平方法，起点在右端，子项目从右到左排列。

item1

item2

item3

 

flex-direction: column-reverse;

 

column-reverse：主轴为垂直方法，起点在下边。子项目从下到上排列。

• flex-wrap 属性定义了容器里子项目是单行或者多行显示。如果允许换行，这个属性决定新行的堆叠方向

语法： flex-wrap： nowrap | wrap | wrap-reverse 

　　效果极其每个属性值的作用：

item1

item2

item3

item4

item5

 

flex-wrap: nowrap;
/*
默认值为：nowrap
flex 的元素被摆放到到一行，
这可能导致溢出 flex 容器。
*/

 

 

 

 

 

item1

item2

item3

item4

item5

 

flex-wrap: wrap;
/* 换行 */

 

item1

item2

item3

item4

item5

 

flex-wrap: wrap-reverse;
/* 反向换行 */

 

• justify-content 属性定义了子项目在主轴上的对齐方式

语法：  justify-content: space-between | space-around | space-evenly | center | flex-start | flex-end 

　　效果极其每个属性值的作用：

item1

item2

item3

 

justify-content: space-around;
/*
两端对齐，
每个子项目两侧分配相同的空间
*/

 

item1

item2

item3

 

justify-content: space-between;
/*
两端对齐，
每个子项目之间间隔相等
*/

 

item1

item2

item3

 

justify-content: space-evenly;
/*
每个子项目之间的间隔相等
兼容性有问题，不建议使用
*/

 

item1

item2

 

justify-content: center;
/*
居中排列
*/

 

item1

item2

 

justify-content: flex-start;
/*
从主轴开始位置排列
*/

 

item1

item2

 

justify-content: flex-start;
/*
从主轴结束位置排列
*/

 

• align-content 属性定义了子项目（该属性把所有子项看做一个整体）在侧轴上的对齐方式，属性值的作用和 justify-content 一样

语法： align-content: space-between | space-around | space-evenly | center | flex-start | flex-end 

     效果极其每个属性值的作用：

item1

item2

item3

item4

item5

 align-content: space-between; 

item1

item2

item3

item4

item5

 align-content: space-around; 

item1

item2

item3

item4

item5

 align-content: space-evenly; 

item1

item2

item3

item4

item5

 align-content: center; 

item1

item2

item3

item4

item5

 align-content: flex-start; 

item1

item2

item3

item4

item5

 align-content: flex-end; 

• align-items 属性定义了子项目在侧轴上的对齐方式

语法： align-items: center | flex-start | flex-end | baseline | stretch 

     效果极其每个属性值的作用：

item1

item2

item3

 

align-items: flex-start;
/*
子元素向侧轴起点对齐。
*/

 

item1

item2

item3

 

align-items: flex-end;
/*
子元素向侧轴终点对齐。
*/

 

item1

item2

item3

 

align-items: center;
/*
子项目在侧轴居中。如果子元素在侧轴上的高度高于其容器，
那么在两个方向上溢出距离相同。
*/

 

item1

item2

item3

 

align-items: baseline;
/*
以第一个子项目的第一行文字的基线对齐
*/

 

item1

item2

item3

 

align-items: stretch;
/*
如果子项目没有设置高度或者高度为auto,
子项目则在侧轴方向被拉伸到与容器相同的高度或宽度。
*/