html css中flex容器讲解

什么是弹性布局

Flexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

要使用flex布局，需要先给一个容器元素设置display:flex让它变成flex容器，然后其所有的直接子元素就变成flex项目。

在flex里存在两根轴，叫主轴和交叉轴，互相垂直。主轴默认水平，也可以手动配置方向。

相关的css属性分为两类，一类是给flex容器设置的，一类是给flex子元素设置的。

弹性布局默认值： flex项目顺序水平从左排列，不换行，左对齐，垂直方向占满，flex项目不可放大可缩小。

弹性布局默认不改变项目的宽度，但是它默认改变项目的高度。如果项目没有显式指定高度，就将占据容器的所有高度。

选项配置：点击查看 布局案例：点击查看

配置选项

/*-------------------------父容器配置----------------------------*/
/* 弹性的盒子布局 */
display: flex/inline-flex;
/* 项目水平或垂直排列(默认行正常顺序排列) */
flex-direction: row/row-reverse/column/column-reverse;
/* 项目是否换行(默认不换行) */
flex-wrap: nowrap/wrap/wrap-reverse;
/* 项目对齐方式(默认左对齐) */
justify-content: flex-start/center/flex-end/space-between/space-around;
/* 交叉轴对齐方式(默认占满整个容器高度) */
align-items: stretch(auto)/flex-start/flex-end/center/baseline;

/*在交叉轴的对齐方式(默认轴线占满整个交叉轴)。注意如果项目只定义了一根轴线，那么该属性不生效。*/
align-content: stretch/flex-start/flex-end/center/space-between/space-around;

/*---------------------------项目配置----------------------------*/
/* 该项目的放大比例(默认0:即有空间也不放大) */
flex-grow: 0;

/* 该项目的缩小比例(默认1:即空间不够就缩小) */
flex-shrink: 1;

/* (默认为auto,即以该项width和height值为准)*/
flex-basis: auto;

/* 上面三项简写(默认0 1 auto,后两个属性可选) */
flex: flex-grow flex-shrink flex-basis


/* 该项目排列顺序，越小越靠前(默认0) */
order: 0;

/* 该项目单独定义对齐方式来覆盖父元素的align-items属性(默认auto表示继承，如果没有父元素则为stretch) */
align-self: auto/stretch/flex-start/flex-end/center/baseline;