CSS弹性容器知识详解-PHP九期

一、弹性容器：任何一个元素,只要设置了“display: flex”属性, 就可以将它声明为一个Flex容器，分为块级容器“display: flex”和行内容器“display:inline-flex”。

display：flex。container没有设置宽度，默认为100%；

display：inline-flex，container也没有设置宽度，但父元素会根据子元素的宽高去适应。

.container {  border: 1px solid red;  background-color: lightgreen;}
.item {  box-sizing: border-box;  border: 1px solid;  width: 100px; height: 100px;}
.flex {  display: flex;}
.inline-flex {  display: inline-flex;}

二、使用弹性容器做一个简单的导航栏

使用<a>标签做导航栏，首先要先把a标签的默认格式清除，再加上想要的样式，使用display：flex，把导航栏做成弹性容器。

a {  text-decoration: none;  background-color: lightgreen;  color: black;  padding: 10px 5px;  margin: 10px 5px;  border-radius: 5px 5px 0 0;}
nav {  display: flex;  border-bottom: 1px solid black;}
a:hover {  background-color: lightblue;  color: white;  font-weight: bold;}

三、弹性元素排列方向，flex-direction属性

①、row：默认从左到右排列

②、row-reverse：默认从右到左排列

③、column：默认从上到下排列

④、column-reverse：默认从下到上排列

@import "public.css";
.row {  flex-direction: row;}
.row-reverse {  flex-direction: row-reverse;}
.column {  flex-direction: column;}
.column-reverse {  flex-direction: column-reverse;}

四、在第二点的基础上完善网站首页

@import "style2.css";
* {  margin: 10px;  padding: 10px;}
body,nav,main,article {  display: flex;}
body,article {  flex-direction: column;}
footer {  border-top: 1px solid black;}
nav {  padding-bottom: 0;}

五、弹性元素在容器内换行

flex-wrap: nowrap | wrap | wrap-reverse;
①、nowrap：（默认）不换行，元素自动缩小填充容器

②、wrap：换行，第一行在上方

③、wrap-reverse：反转换行，第一行在下方

.nowrap {  flex-wrap: nowrap;}
.wrap {  flex-wrap: wrap;}
.wrap-reverse {  flex-wrap: wrap-reverse;}

六、flex-flow属性是flex-direction属性和flex-wrap属性的简写形式

flex-flow: <flex-direction> <flex-wrap>;

.wrap {  flex-flow: row wrap;}

七、弹性元素在主轴上如何分布

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

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

①、flex-start（默认值）：左对齐

②、flex-end：右对齐

③、center： 居中

④、space-between：首尾元素紧贴起止点，其他元素平均分布

⑤、space-around：每个元素两边空间相等，相邻元素空间累加

⑥、space-evenly：每个元素两边空间相等

.flex-start {  justify-content: flex-start;}
.flex-end {  justify-content: flex-end;}
.flex-center {  justify-content: center;}
/* 剩余空间分布 */
.space-between {  justify-content: space-between;}
.space-around {  justify-content: space-around;}
.space-evenly {  justify-content: space-evenly;}

八、弹性元素主轴对齐来改写导航

nav {  justify-content: flex-start;}
nav {  justify-content: flex-end;}
nav {  justify-content: center;}

九、弹性元素在垂直方向上的对齐方法

单行：align-items: flex-start | flex-end | center | stretch;

①、flex-start：交叉轴的起点对齐。

②、flex-end：交叉轴的终点对齐。

③、center：交叉轴的中点对齐。

④、stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

多行：align-content: flex-start | flex-end | center | space-between | space-around | stretch | space-evenly;

①、flex-start：与交叉轴的起点对齐。

②、flex-end：与交叉轴的终点对齐。

③、center：与交叉轴的中点对齐。

④、space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

⑤、space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

⑥、stretch（默认值）：轴线占满整个交叉轴。

⑦、space-evenly：全部轴线之间的距离相等。

.container {  width: 500px;  height: 300px;}
.wrap {  flex-wrap: wrap;}
.stretch {  align-items: stretch;}
.flex-start {  align-items: flex-start;}
.flex-end {  align-items: flex-end;}
.flex-center {  align-items: center;}
.wrap-stretch {  align-content: stretch;}
.wrap-flex-start {  align-content: flex-start;}
.wrap-flex-end {  align-content: flex-end;}
.wrap-flex-center {  align-content: center;}
.wrap-space-between {  align-content: space-between;}
.wrap-space-around {  align-content: space-around;}
.wrap-space-evenly {  align-content: space-evenly;}