弹性盒模型
由父元素控制子元素布局的方案,需要给父元素添加flex样式,任意元素都可添加flex样式
display: flex;
如果一个元素添加了上面的属性,表示这个元素开始使用弹性盒模型布局
弹性布局分为 伸缩容器（父级） 和 伸缩项目（子级）
设置了弹性盒模型的元素被称为容器, 内部子元素为称为项目.
55.png
容器默认存在两根轴：
- 水平的主轴（main axis）
- 垂直的交叉轴（cross axis）。
主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；
交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size
注意:
设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
1. 容器属性
容器属性总汇:
| 属性 | 描述 |
|---|---|
| flex-direction | 指定弹性容器中子元素排列方式（控制主轴方向的） |
| flex-wrap | 设置弹性盒子的子元素超出父容器时是否换行（默认不换行，不要加固定的宽度高度） |
| flex-flow | flex-direction 和 flex-wrap 的简写 |
| justify-content | 设置弹性盒子元素在主轴（横轴）方向上的对齐方式 |
| align-items | 设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式 |
| align-content | 修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐（前提允许换行flex-wrap） |
1.1. flex-direction 排列盒子方向
属性值:
| 值 | 描述 |
|---|---|
| row | 默认值。元素将水平显示，正如一个行一样。 |
| row-reverse | 与 row 相同，但是以相反的顺序。 |
| column | 元素将垂直显示，正如一个列一样。 |
| column-reverse | 与 column 相同，但是以相反的顺序。 |
66j.jpg
1.2. flex-wrap 换行方式
控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向
属性值:
| 值 | 描述 |
|---|---|
| nowrap | 默认值。规定元素不拆行或不拆列。 |
| wrap | 规定元素在必要的时候拆行或拆列。 |
| wrap-reverse | 规定元素在必要的时候拆行或拆列，但是以相反的顺序。 |
图片介绍:
-
nowrap(默认)：不换行。
77j.jpg
2.wrap：换行，第一行在上方。
88j.jpg
3.wrap-reverse：换行，第一行在下方。
99j.jpg
1.3. flex-flow 属性
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，
默认值为row nowrap。
flex-flow: <flex-direction> <flex-wrap>;
1.4. justify-content 属性
定义项目在主轴方向上的对齐方式。
justify-content: flex-start | flex-end | center | space-between | space-around;
属性值:
| 值 | 描述 |
|---|---|
| flex-start | 默认值。项目位于容器的开头。（主轴开始位置对齐） |
| flex-end | 项目位于容器的结尾。（主轴结束位置对齐） |
| center | 项目位于容器的中心。 |
| space-between | 项目位于各行之间留有空白的容器内。（两端对齐） |
| space-around | 项目位于各行之前、之间、之后都留有空白的容器内。（左右两端占一个间隔，中间的元素之间的间隔是两个间隔） |
1010j.jpg
1.5. align-items属性
定义项目在交叉轴上如何对齐 。(适用于交叉轴单行或单列，只有一行或一列的情况)
align-items: flex-start | flex-end | center | baseline | stretch;
具体的对齐方式与交叉轴的方向有关
属性值:
| 值 | 描述 |
|---|---|
| stretch | 默认值。项目被拉伸以适应容器。 |
| center | 项目位于容器的中心。 |
| flex-start | 项目位于容器的开头。 |
| flex-end | 项目位于容器的结尾。 |
| baseline | 项目位于容器的基线上。 |
1111j.jpg
1.6. align-content 属性 (多行对齐)
定义了多根（行）交叉轴的对齐方式。如果项目只单行，该属性不起作用
属性值:
| 值 | 描述 |
|---|---|
| stretch | 默认值。项目被拉伸以适应容器。 |
| flex-start | 与交叉轴的起点对齐 |
| flex-end | 与交叉轴的终点对齐。 |
| center | 与交叉轴的中点对齐。 |
| space-between | 与交叉轴两端对齐，轴线之间的间隔平均分布。 |
| space-around | 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 |
<span style='color:red;'>多行下的align-content会使align-items失效</span>
1212j.jpg
<style>
* {
padding: 0;
margin: 0;
}
ul {
display: flex;
height: 500px;
width: 870px;
margin: 50px auto;
flex-direction: row-reverse;
/*主轴方向row（默认） row-reverse column column-reverse*/
flex-wrap: wrap;
/* flex-wrap 换行方式nowrap(默认) wrap wrap-reverse*/
/*flex-flow:row wrap;主轴 换行复合属性*/
justify-content: space-between;
/*主轴对齐方式 flex-start flex-end center space-between space-around*/
/*align-items: flex-start; 单行对齐 stretch flex-end center baseline */
align-content: space-between;
/*多行对齐 stretch flex-start flex-end center space-around space-between*/
list-style: none;
background-color: pink;
}
ul li {
width: 100px;
height: 100px;
/*如果没有高度值，项目默认拉伸占满交叉轴 align-items:stretch。其他值flex-end center 的高度靠内容撑开*/
background-color: skyblue;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
</body>
2. item项目属性
项目属性总汇：
| 属性 | 描述 |
|---|---|
| order | 设置弹性盒子的子元素排列顺序。 |
| flex-grow | 设置或检索弹性盒子元素的扩展比率。 |
| flex-shrink | 指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之<br />和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。 |
| flex-basis | 用于设置或检索弹性盒伸缩基准值。 |
| flex | 设置弹性盒子的子元素如何分配空间。 |
| align-self | 在弹性子元素上使用。覆盖容器的 align-items 属性。 |
1.1. order属性 项目的排列顺(数字)
属性值: 数字
用整数值来定义排列顺序，数值小的排在前面。可以为负值，默认为0。
flex-item { order: 2; }
1.jpg
2.2. flex-grow属性 放大比例(数字)
属性值: 数字
规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。即如果存在剩余空间，也不放大
子元素的尺寸=子元素默认的被内容撑开的尺寸+父级盒子剩余空间尺寸*子元素的box-grow属性值 / 所有子元素的flex-grow属性值的和
flex-item { flex-grow: 2; }
2.jpg
<style>
* {
padding: 0;
margin: 0;
}
ul {
display: flex;
/*width: 800px;*/
/* max-width: 800px; */
/*元素默认跟着浏览器100%显示，限定最大值800，浏览为超春800，元素还是800，浏览器小于800px时，容器就会跟着缩小*/
/* min-width: 300px; */
/*浏览器窗口小于300，元素还是300，浏览器出现滚动条*/
height: 200px;
margin: 50px auto;
list-style: none;
}
ul li {
background-color: pink;
}
ul li:nth-child(1) {
order: 1;
/*order项目的排列顺(数字)*/
flex-grow: 2;
/*子元素的尺寸=子元素默认的被内容撑开的尺寸+父级盒子剩余空间尺寸*子元素的box-grow属性值 / 所有子元素的flex-grow属性值的和*/
background-color: yellow;
}
ul li:nth-child(even) {
background-color: skyblue;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
2.3. flex-shrink属性 缩小比例（数字）
属性值: 数字
规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1。即如果空间不足，该项目将缩小。
属性值介绍：
- 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
- 如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者（为0的不被压缩）不缩小。
-
负值对该属性无效
3.jpg
弹性盒模型的项目默认不扩展flex-grow：0，默认压缩，flex-shrink:1。
2.4. flex-basis属性 项目占据的主轴空间(px)
定义了在分配多余空间之前，项目占据的主轴空间（main size）浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto（基准空间靠内容撑开）
属性值: <length> | <percentage> | auto | content
-
<length>： 用长度值来定义宽度。不允许负值
.<percentage>： 用百分比来定义宽度。不允许负值
.auto：默认值,无特定宽度值，取决于其它属性值，auto的计算规则是 检索一下你是否设置了width（或者height值，取决于flex-direction）就会采用这个值，否则的话最后使用的值是 content。auto就是设置了就用设置的，没有就靠内容撑开
.content： 基于内容自动计算宽度
2.5. flex属性
flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
flex-grow,flex-shrink和flex-basis的简写（扩展，缩小，基准值）
默认值为0 1 auto
属性值
| 值 | 描述 |
|---|---|
| flex-grow | 一个数字，规定项目将相对于其他元素进行扩展的量。 |
| flex-shrink | 一个数字，规定项目将相对于其他元素进行收缩的量。 |
| flex-basis | 项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" <br />或任何其他长度单位的数字。 |
| auto | 与 1 1 auto 相同。 |
| none | 与 0 0 auto 相同。 |
| initial | 设置该属性为它的默认值，即为 0 1 auto。 |
| inherit | 从父元素继承该属性。 |
属性值介绍：
- 该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
- 建议优先使用这个属性而不分开写，浏览器会推算相关值。
- grow表示伸张因子，shrink表示是收缩因子。
<style>
/*弹性盒模型flex项目缩放例子，左右固定，中间自适应*/
* {
padding: 0;
margin: 0;
}
.wrap {
display: flex;
/*弹性盒模型*/
height: 60px;
background-color: #f3f3f3;
}
.left {
display: flex;
/*弹性盒模型*/
justify-content: center;
/*主轴居中对齐*/
align-items: center;
/*交叉轴居中对齐*/
flex: 0 0 auto;
/*不放大 不缩小 基准宽度，没有基准宽度就内容撑开 可以直接flex:none;*/
width: 50px;
background-color: pink;
}
.search {
display: flex;
/*弹性盒模型*/
justify-content: center;
/*主轴居中对齐*/
align-items: center;
/*交叉轴居中对齐*/
flex: 1 1 auto;
/*放大一倍 缩小一倍 默认宽度auto基准宽度，没有基准宽度就内容撑开*。缩小比例默认是1 默认宽度auto，所以可以简写flex:1;*/
background: skyblue;
}
.right {
display: flex;
/*弹性盒模型*/
justify-content: center;
/*主轴居中对齐*/
align-items: center;
/*交叉轴居中对齐*/
flex: 0 0 auto;
/*不放大 不缩小 基准宽度，没有基准宽度就内容撑开*/
width: 50px;
background-color: greenyellow;
}
input {
width: 100%;
height: 30px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left">
<</div>
<div class="search"><input type="text"></div>
<div class="right">享</div>
</div>
</body>
2.6. align-self 属性（项目自己的交叉轴对齐方式）
允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。
（默认值为auto）表示示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
该属性可能取6个值，除了auto，其他都与align-items属性完全一致
属性值:
| 值 | 描述 |
|---|---|
| auto | 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。 |
| stretch | 元素被拉伸以适应容器。 |
| center | 元素位于容器的中心。 |
| flex-start | 元素位于容器的开头。 |
| flex-end | 元素位于容器的结尾。 |
| baseline | 元素位于容器的基线上。 |
| initial | 设置该属性为它的默认值。 |
| inherit | 从父元素继承该属性。 |
4.jpg
<style>
* {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
}
ul {
display: flex;
align-items: center;
width: 500px;
height: 200px;
background-color: #f3f3f3;
list-style: none;
}
ul li {
width: 100px;
}
ul li:nth-child(1) {
height: 30px;
background-color: pink;
}
ul li:nth-child(2) {
height: 80px;
background-color: green;
}
ul li:nth-child(3) {
height: 20px;
background-color: blue;
}
ul li:nth-child(4) {
height: 20px;
background-color: yellow;
}
ul li:nth-child(5) {
height: 50px;
align-self: flex-end;
/*元素位于容器的结尾*/
background-color: greenyellow;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
3. flex兼容性
3.1. 旧版本的flex写法只支持旧的语法书写
- 最早： display: box;
- 过渡： display: flex box;
- 当今标准display: flex;
3.2. 为了兼容老版本的浏览器
需要加浏览器兼容前缀
网友评论