87.CSS Flex 弹性盒模型布局教程(共用的css在48篇文章gird)
CSS Flex 弹性盒模型布局教程
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
flex布局就是给任何一个容器添加 display:flex
注:设为 Flex 布局以后,子元素的float
、clear
和vertical-align
属性将失效。
注:Safari 6.1+(前缀-webkit-) iOS 7.1+(前缀-webkit-)
最新flex 兼容性查看请点此处 最新Flex兼容性Flex 容器
flex container
和 Flex 项目flex item
容器默认存在两根轴:水平的主轴(main axis)
和垂直的交叉轴(cross axis)
。
主轴的开始位置(与边框的交叉点)叫做main start
,结束位置叫做main end
;
交叉轴的开始位置叫做cross start
,结束位置叫做cross end
。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size
,占据的交叉轴空间叫做cross size
。
前六个是容器属性,后面是项目属性
。
1. flex-direction
属性
flex-direction
属性有四个值 row | row-reverse | column | column-reverse
;
row(默认值):主轴为水平方向,起点在左端。如下图
row-reverse:主轴为水平方向,起点在右端。
因没有给容器设置宽度,所以默认上一级父亲的宽度
.section-one-1{
display: flex;
flex-direction:row;
}
column:主轴为垂直方向,起点在上。如下图
column-reverse:主轴为垂直方向,起点在下。
.section-one-2{
display: flex;
flex-direction:column;
}
2.flex-wrap
属性
默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap
属性定义,如果一条轴线排不下,如何换行。
flex-wrap
属性有三个值 nowrap | wrap | wrap-reverse
;
为nowrap
值时,不换行。不管项目宽度值为多少,最大值也被均分在一行内
.section-two-1{
display: flex;
flex-wrap:
nowrap
;}
.section-two-1 span{
width:400px;
}
为wrap
值时,换行。第一行在最上面
.section-two-2{
display: flex;
flex-wrap:
wrap
;}
.section-two-1 span{
width:400px;
}
为wrap-reverse
值时,换行。第一行在最下面
.section-two-3{
display: flex;
flex-wrap:
wrap-reverse
;}
.section-two-1 span{
width:400px;
}
3. flex-flow
属性
flex-flow
属性是flex-direction
属性和flex-wrap
属性的简写形式,默认值为row nowrap
。
.section-three-1{
display: flex;
flex-flow:
column wrap-reverse
;}
4. justify-content
属性
justify-content
属性定义了项目在主轴上的对齐方式。
justify-content
属性有四个值: flex-start | flex-end | center | space-between | space-around
;
flex-start
(默认值):左对齐
flex-end
右对齐
center
: 居中
space-between
:两端对齐,项目之间的间隔都相等。
space-around
:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
具体对齐方式与轴的方向有关。默认一般从左至右,下图是flex-direction: row-reverse;
从右至左
.section-four-1{
display: flex;
justify-content:
space-around
;flex-direction: row-reverse;
}
5. align-items
属性
align-items
属性定义项目在交叉轴对齐方式
flex-start
交叉轴的起点对齐
flex-end
交叉轴的终点对齐
center
交叉轴的中点对齐
baseline
项目的第一行文字的基线对齐
stretch
(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度
.section-five-1{
display: flex;
align-items:
stretch
;}
.section-five-1 .one{
height:200px;
line-height:50px;
}
.section-five-1 .two{
height:100px;
line-height:50px;
}.section-five-1 .three{
height:50px;
line-height:50px;
}
.section-five-2{
display: flex;
align-items:
baseline
;}
.section-five-2 .one{
height:200px;
line-height:50px;
}
.section-five-2 .two{
height:100px;
line-height:50px;
}.section-five-2 .three{
height:50px;
line-height:50px;
}
6. align-content
属性
align-content
属性定义多根轴线的对齐方式。如果项目只有一根轴线,则属性不起作用
flex-start
:与交叉轴的起点对齐。
flex-end
:与交叉轴的终点对齐。
center
:与交叉轴的中点对齐。
space-between
:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around
:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch
(默认值):轴线占满整个交叉轴。
.section-six-1{
display: flex;
align-content:
space-between
;height: 600px;
border: 1px solid #000;
flex-flow: wrap;
}
.section-six-1 span{
width:300px;
}
在运用 align-content
时,要声明换行 flex-flow:wrap
7.order
属性
order
属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
.section-seven-1{
display: flex;
}
.section-seven-1>span:first-child{
order:0
}
.section-seven-1>span:nth-child(5){
order:1;
}
.section-seven-1>span:nth-child(4){
order:2;
}
8. flex-grow
属性
flex-grow
属性定义项目的放大比例,默认为0。
如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
.section-eight-1{
display: flex;
}
.section-eight-1>span:first-child{
flex-grow:1
}
.section-eight-1>span:nth-child(2){
flex-grow:1;
}
.section-eight-1>span:nth-child(4){
flex-grow:2;
}
.section-eight-1>span:nth-child(5){
flex-grow:1;
}
9. flex-shrink
属性
flex-shrink
属性定义了项目的缩小比例,默认为1.即若空间不足,该项目将缩小
如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。
负值对该属性无效。
.section-nine-1{display: flex;}
.section-nine-1 span{width:300px;}
.section-nine-1>span:first-child{flex-shrink:2;}
.section-nine-1>span:nth-child(2){flex-shrink:3;}
.section-nine-1>span:nth-child(4){flex-shrink:4;}
.section-nine-1>span:nth-child(5){flex-shrink:2;}
实例解析:
flex-shrink的默认值为1,如果没有显示定义该属性,将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。
本例中显式定义了
.section-nine-1>span:first-child==>flex-shrink: 2;
.section-nine-1>span:nth-child(2)==>flex-shrink:3
.section-nine-1>span:nth-child(4)==>flex-shrink:4
.section-nine-1>span:nth-child(5)==>flex-shrink:5
隐式定义.section-nine-1>span:nth-child(3)==>flex-shrink:1
所以计算出来总共将剩余空间分成了 12 份,即2:3:1:4:2
我们可以看到父容器继承宽度为 1200px,子项被定义为 300px,子项相加之后即为 1500 px,超出父容器 300px。
那么超出的 300px 需要被 五个盒子消化通过收缩因子,所以加权综合可得 300*2+300*3+300*1+300*4+300*5=3600px。
于是我们可以计算 五个盒子 将被移除的溢出量是多少:
1 被移除溢出量:(300*2/3600)*300,即等于50px
2 被移除溢出量:(300*3/3600)*300,即等于75px
3 被移除溢出量:(300*1/3600)*300,即等于25px
4 被移除溢出量:(300*4/3600)*300,即等于100px
5 被移除溢出量:(300*2/3600)*300,即等于50px
最后1、2、3、4、5的实际宽度分别为:300-50=250px, 300-75=225px, 300-25=275px, 300-100=200px,300-50=250px,此外,这个宽度是包含边框的。
10.1 flex-basis
属性
flex-basis
属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。
浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。
10.2 flex
属性
flex
属性是flex-grow
, flex-shrink
和 flex-basis
的简写,默认值为0 1 auto。后两个属性可选。
该属性有两个快捷值:auto (1 1 auto)
和 none (0 0 auto)
。
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。
10.3 align-self
属性
align-self
属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items
属性。默认值为auto,表示继承父元素的align-items
属性,如果没有父元素,则等同于stretch。
属性取值五个值:auto | flex-start | flex-end | center | baseline | stretch; 其作用和align-items 的作用一样。
放上css代码
header{
margin:20px 0;
text-align: center;
font-size: 30px;
color:#2ecc71;
}
.one{
/*width:100px;*/
/*height:100px;*/
background: #1abc9c;
color:#fff;
font-size: 40px;
text-align: center;
line-height:100px;
}
.two{
/*width:100px;*/
/*height:100px;*/
background: #2ecc71;
color:#fff;
font-size: 40px;
text-align: center;
line-height:100px;
}
.three{
/*width:100px;*/
/*height:100px;*/
background: #3498db;
color:#fff;
font-size: 40px;
text-align: center;
line-height:100px;
}
.four{
/*width:100px;*/
/*height:100px;*/
background: #9b59b6;
color:#fff;
font-size: 40px;
text-align: center;
line-height:100px;
}
.five{
/*width:100px;*/
/*height:100px;*/
background:#34495e;
color:#fff;
font-size: 40px;
text-align: center;
line-height:100px;
}
.six{
/*width:100px;*/
/*height:100px;*/
background:#ff9966;
color:#fff;
font-size: 40px;
text-align: center;
line-height:100px;
}
.seven{
/*width:100px;*/
/*height:100px;*/
background:#f1c40f;
color:#fff;
font-size: 40px;
text-align: center;
line-height:100px;
}
.eight{
/*width:100px;*/
/*height:100px;*/
background: #e67e22;
color:#fff;
font-size: 40px;
text-align: center;
line-height:100px;
}
.nine{
/*width:100px;*/
/*height:100px;*/
background: #e74c3c;
color:#fff;
font-size: 40px;
text-align: center;
line-height:100px;
}
.section-1{
margin:20px 0; }
.section-one-1{
display: flex;
flex-direction:row;
}
.section-one-2{
display: flex;
flex-direction:column;
}
.section-two-1{
display: flex;
flex-wrap:nowrap;
}
.section-two-1 span{
width:400px;
}
.section-two-2{
display: flex;
flex-wrap:wrap;
}
.section-two-2 span{
width:400px;
}
.section-two-3{
display: flex;
flex-wrap:wrap-reverse;
}
.section-two-3 span{
width:400px;
} .section-three-1{
display: flex;
flex-flow:column wrap-reverse;
}
.section-four-1{
display: flex;
justify-content: space-around;
flex-direction: row-reverse;
}
.section-four-1 .one{
width:200px;
}
.section-four-1 .two{
width:100px;
}.section-four-1 .three{
width:400px;
}
.section-five-1{
display: flex;
align-items:stretch;
}
.section-five-1 .one{
height:200px;
line-height:50px;
}
.section-five-1 .two{
height:100px;
line-height:50px;
}.section-five-1 .three{
height:50px;
line-height:50px;
} .section-five-2{
display: flex;
align-items:baseline;
}
.section-five-2 .one{
height:200px;
line-height:50px;
}
.section-five-2 .two{
height:100px;
line-height:50px;
}.section-five-2 .three{
height:50px;
line-height:50px;
}
.section-six-1{
display: flex;
align-content: space-between;
height: 600px;
border: 1px solid #000;
flex-flow: wrap;
}
.section-six-1 span{
width:300px;
}
.section-seven-1{
display: flex;
}
.section-seven-1>span:first-child{
order:0;
}
.section-seven-1>span:nth-child(5){
order:1;
}
.section-seven-1>span:nth-child(4){
order:2;
}
.section-eight-1{
display: flex;
}
.section-eight-1>span:first-child{
flex-grow:1;
}
.section-eight-1>span:nth-child(2){
flex-grow:1;
}
.section-eight-1>span:nth-child(4){
flex-grow:2;
}
.section-eight-1>span:nth-child(5){
flex-grow:1;
} .section-nine-1{
display: flex;
}
.section-nine-1 span{
width:300px;
}
.section-nine-1>span:first-child{
flex-shrink:2;
}
.section-nine-1>span:nth-child(2){
flex-shrink:3;
}
.section-nine-1>span:nth-child(4){
flex-shrink:4;
}
.section-nine-1>span:nth-child(5){
flex-shrink:2;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Flex 弹性盒模型布局教程</title>
<link rel="stylesheet" href="/css/public.css">
<link rel="stylesheet" href="/css/flex.css">
</head>
<body class="container-1200">
<section>
<header>CSS Flex 弹性盒模型布局教程</header>
<p>Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。</p>
<p>flex布局就是给任何一个容器添加 <code>display:flex</code></p>
<p><b>注:</b>设为 Flex 布局以后,子元素的<code>float</code>、<code>clear</code>和<code>vertical-align</code>属性将失效。</p>
<blockquote>
<h1><p style="width:50%; float: left;"><b>注:</b>Safari 6.1+(前缀-webkit-) iOS 7.1+(前缀-webkit-)<br>
最新flex 兼容性查看请点此处 <a style="color:red;font-weight:800;" href="https://caniuse.com/#search=flex">最新Flex兼容性</a></p>
<p style="width:50%; float: left;">Flex 容器 <code>flex container</code> 和 Flex 项目 <code>flex item</code> </p></h1>
<h1 style="display: -webkit-inline-flex"><img style="width:50%;" src="/image/flex/one.jpg" alt=""> <img style="width:50%;" src="/image/flex/two.png" alt=""></h1>
</blockquote> <p>容器默认存在两根轴:水平的主轴<code>(main axis)</code>和垂直的交叉轴<code>(cross axis)</code>。</p>
<p>主轴的开始位置(与边框的交叉点)叫做<code>main start</code>,结束位置叫做<code>main end</code>;</p>
<p>交叉轴的开始位置叫做<code>cross start</code>,结束位置叫做<code>cross end</code>。</p>
<p>项目默认沿主轴排列。单个项目占据的主轴空间叫做<code>main size</code>,占据的交叉轴空间叫做<code>cross size</code>。</p>
<p><code>前六个是容器属性,后面是项目属性</code>。</p>
</section>
<section class="section-1">
<h1>1. <code>flex-direction</code>属性</h1>
<p><code>flex-direction</code>属性有四个值 <code>row | row-reverse | column | column-reverse</code>;</p>
<p>row(默认值):主轴为水平方向,起点在左端。如下图</p>
<p>row-reverse:主轴为水平方向,起点在右端。</p>
<p>因没有给容器设置宽度,所以默认上一级父亲的宽度</p>
<blockquote>
<div>
<p>.section-one-1{</p>
<p> display: flex;</p>
<p>flex-direction:row;</p>
<p>}</p>
</div>
<img style="width: 61%;" src="/image/flex/1-1.png" alt="">
<img style="width: 61%;" src="/image/flex/1-2.png" alt="">
</blockquote>
<div class="section-one-1">
<span class="one">1</span>
<span class="two">2</span>
<span class="three">3</span>
<span class="four">4</span>
<span class="five">5</span>
<span class="six">6</span>
<span class="seven">7</span>
<span class="eight">8</span>
<span class="nine">9</span>
</div>
<p>column:主轴为垂直方向,起点在上。如下图</p>
<p>column-reverse:主轴为垂直方向,起点在下。</p>
<blockquote>
<div>
<p>.section-one-2{</p>
<p> display: flex;</p>
<p>flex-direction:column;</p>
<p>}</p>
</div>
<img src="/image/flex/1-3.png" alt="">
<img src="/image/flex/1-4.png" alt="">
</blockquote>
<div class="section-one-2">
<span class="one">1</span>
<span class="two">2</span>
<span class="three">3</span>
</div>
</section>
<section class="section-1">
<h1>2.<code>flex-wrap</code>属性</h1>
<p>默认情况下,项目都排在一条线(又称"轴线")上。<code>flex-wrap</code>属性定义,如果一条轴线排不下,如何换行。</p>
<p><code>flex-wrap</code>属性有三个值 <code>nowrap | wrap | wrap-reverse</code>;</p>
<p>为<code>nowrap</code>值时,不换行。不管项目宽度值为多少,最大值也被均分在一行内</p>
<blockquote>
<div>
<p>.section-two-1{</p>
<p> display: flex;</p>
<p>flex-wrap:<code>nowrap</code>;</p>
<p>}</p>
<p>.section-two-1 span{</p>
<p>width:400px;</p>
<p> }</p>
</div> <img style="width: 61%;" src="/image/flex/2-1.png" alt="">
</blockquote> <div class="section-two-1">
<span class="one">1</span>
<span class="two">2</span>
<span class="three">3</span>
<span class="four">4</span>
<span class="five">5</span>
<span class="six">6</span>
<span class="seven">7</span>
<span class="eight">8</span>
<span class="nine">9</span>
</div>
<p>为<code>wrap</code>值时,换行。第一行在最上面</p>
<blockquote>
<div>
<p>.section-two-2{</p>
<p> display: flex;</p>
<p>flex-wrap:<code>wrap</code>;</p>
<p>}</p>
<p>.section-two-1 span{</p>
<p>width:400px;</p>
<p> }</p>
</div> <img style="width: 61%;" src="/image/flex/2-2.png" alt="">
</blockquote> <div class="section-two-2">
<span class="one">1</span>
<span class="two">2</span>
<span class="three">3</span>
<span class="four">4</span>
<span class="five">5</span>
<span class="six">6</span>
<span class="seven">7</span>
<span class="eight">8</span>
<span class="nine">9</span>
</div>
<p>为<code>wrap-reverse</code>值时,换行。第一行在最下面</p>
<blockquote>
<div>
<p>.section-two-3{</p>
<p> display: flex;</p>
<p>flex-wrap:<code>wrap-reverse</code>;</p>
<p>}</p>
<p>.section-two-1 span{</p>
<p>width:400px;</p>
<p> }</p>
</div> <img style="width: 61%;" src="/image/flex/2-3.png" alt="">
</blockquote> <div class="section-two-3">
<span class="one">1</span>
<span class="two">2</span>
<span class="three">3</span>
<span class="four">4</span>
<span class="five">5</span>
<span class="six">6</span>
<span class="seven">7</span>
<span class="eight">8</span>
<span class="nine">9</span>
</div>
</section>
<section class="section-1">
<h1>3. <code>flex-flow</code>属性</h1>
<p><code>flex-flow</code>属性是<code>flex-direction</code>属性和<code>flex-wrap</code>属性的简写形式,默认值为<code>row nowrap</code>。</p>
<blockquote>
<div>
<p>.section-three-1{</p>
<p> display: flex;</p>
<p>flex-flow:<code>column wrap-reverse</code>;</p>
<p> }</p>
</div> <img style="width: 61%;" src="/image/flex/3.png" alt="">
</blockquote> <div class="section-three-1">
<span class="one">1</span>
<span class="two">2</span>
<span class="three">3</span>
</div>
</section>
<section class="section-1">
<h1>4. <code>justify-content</code>属性</h1>
<p><code>justify-content</code>属性定义了项目在主轴上的对齐方式。</p>
<p><code>justify-content</code>属性有四个值: <code>flex-start | flex-end | center | space-between | space-around</code>;</p>
<p><code>flex-start</code>(默认值):左对齐</p>
<p><code>flex-end</code>右对齐</p>
<p><code>center</code>: 居中</p>
<p><code>space-between</code>:两端对齐,项目之间的间隔都相等。</p>
<p><code>space-around</code>:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。</p>
<p>具体对齐方式与轴的方向有关。默认一般从左至右,下图是<code> flex-direction: row-reverse;</code>从右至左</p>
<blockquote>
<div>
<p>.section-four-1{</p>
<p> display: flex;</p>
<p>justify-content:<code>space-around</code>;</p>
<p> flex-direction: row-reverse;</p>
<p> }</p>
</div> <img style="width: 61%;" src="/image/flex/4.png" alt="">
</blockquote>
<div class="section-four-1">
<span class="one">1</span>
<span class="two">2</span>
<span class="three">3</span>
<span class="four">4</span>
</div>
</section>
<section class="section-1">
<h1>5. <code>align-items</code>属性</h1>
<p><code>align-items</code>属性定义项目在交叉轴对齐方式</p>
<p><code>flex-start</code>交叉轴的起点对齐</p>
<p><code>flex-end</code>交叉轴的终点对齐 </p>
<p><code>center</code>交叉轴的中点对齐 </p>
<p><code>baseline</code>项目的第一行文字的基线对齐 </p>
<p><code>stretch</code>(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度</p>
<blockquote>
<div>
<p>.section-five-1{</p>
<p> display: flex;</p>
<p>align-items:<code>stretch</code>;</p>
<p> }</p>
<p>.section-five-1 .one{</p>
<p>height:200px;</p>
<p>line-height:50px;</p>
<p>}</p>
<p>.section-five-1 .two{</p>
<p>height:100px;</p>
<p>line-height:50px;</p>
<p>}.section-five-1 .three{</p>
<p>height:50px;</p>
<p>line-height:50px;</p>
<p>}</p>
</div> <img style="width: 61%;" src="/image/flex/5-1.png" alt="">
</blockquote>
<div class="section-five-1">
<span class="one">1</span>
<span class="two">2</span>
<span class="three">3</span>
<span class="four">4</span>
</div>
<blockquote>
<div>
<p>.section-five-2{</p>
<p> display: flex;</p>
<p>align-items:<code>baseline</code>;</p>
<p> }</p>
<p>.section-five-2 .one{</p>
<p>height:200px;</p>
<p>line-height:50px;</p>
<p>}</p>
<p>.section-five-2 .two{</p>
<p>height:100px;</p>
<p>line-height:50px;</p>
<p>}.section-five-2 .three{</p>
<p>height:50px;</p>
<p>line-height:50px;</p>
<p>}</p>
</div> <img style="width: 61%;" src="/image/flex/5-2.png" alt="">
</blockquote>
<div class="section-five-2">
<span class="one">1</span>
<span class="two">2</span>
<span class="three">3</span>
<span class="four">4</span>
</div>
</section>
<section class="section-1">
<h1>6. <code>align-content</code>属性</h1>
<p><code>align-content</code>属性定义多根轴线的对齐方式。如果项目只有一根轴线,则属性不起作用</p>
<p><code>flex-start</code>:与交叉轴的起点对齐。</p>
<p><code>flex-end</code>:与交叉轴的终点对齐。</p>
<p><code>center</code>:与交叉轴的中点对齐。</p>
<p><code>space-between</code>:与交叉轴两端对齐,轴线之间的间隔平均分布。</p>
<p><code>space-around</code>:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。</p>
<p><code>stretch</code>(默认值):轴线占满整个交叉轴。</p>
</section>
<blockquote>
<div>
<p>.section-six-1{</p>
<p> display: flex;</p>
<p>align-content:<code>space-between</code>;</p>
<p> height: 600px;</p>
<p>border: 1px solid #000;</p>
<p>flex-flow: wrap;</p>
<p>}</p>
<p>.section-six-1 span{</p>
<p>width:300px;</p>
<p>}</p>
</div> <img style="width: 61%;" src="/image/flex/6.png" alt="">
</blockquote>
<p>在运用 <code>align-content</code>时,要声明换行 <code>flex-flow:wrap</code></p>
<div class="section-six-1">
<span class="one">1</span>
<span class="two">2</span>
<span class="three">3</span>
<span class="four">4</span>
<span class="five">5</span>
<span class="six">6</span>
<span class="seven">7</span>
<span class="eight">8</span>
<span class="nine">9</span>
</div>
<section class="section-1">
<h1>7.<code>order</code>属性</h1>
<p><code>order</code>属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。</p>
<blockquote>
<div>
<p>.section-seven-1{</p>
<p> display: flex;</p>
<p>}</p>
<p>.section-seven-1>span:first-child{</p>
<p>order:0</p>
<p>}</p>
<p>.section-seven-1>span:nth-child(5){</p>
<p>order:1;</p>
<p>}</p>
<p>.section-seven-1>span:nth-child(4){</p>
<p>order:2;</p>
<p>}</p>
</div> <img style="width: 61%;" src="/image/flex/7.png" alt="">
</blockquote>
<div class="section-seven-1">
<span class="one">1</span>
<span class="two">2</span>
<span class="three">3</span>
<span class="four">4</span>
<span class="five">5</span>
<span class="six">6</span>
<span class="seven">7</span>
<span class="eight">8</span>
<span class="nine">9</span>
</div>
</section>
<section class="section-1">
<h1>8. <code>flex-grow</code>属性</h1>
<p><code>flex-grow</code>属性定义项目的放大比例,默认为0。</p>
<p>如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。</p>
<blockquote>
<div>
<p>.section-eight-1{</p>
<p> display: flex;</p>
<p>}</p>
<p>.section-eight-1>span:first-child{</p>
<p>flex-grow:1</p>
<p>}</p>
<p>.section-eight-1>span:nth-child(2){</p>
<p>flex-grow:1;</p>
<p>}</p>
<p>.section-eight-1>span:nth-child(4){</p>
<p>flex-grow:2;</p>
<p>}</p>
<p>.section-eight-1>span:nth-child(5){</p>
<p>flex-grow:1;</p>
<p>}</p>
</div> <img style="width: 61%;" src="/image/flex/8.png" alt="">
</blockquote>
<div class="section-eight-1">
<span class="one">1</span>
<span class="two">2</span>
<span class="three">3</span>
<span class="four">4</span>
<span class="five">5</span>
<span class="six">6</span>
<span class="seven">7</span>
<span class="eight">8</span>
<span class="nine">9</span>
</div>
</section>
<section class="section-1">
<h1>9. <code>flex-shrink</code>属性</h1>
<p><code>flex-shrink</code>属性定义了项目的缩小比例,默认为1.即若空间不足,该项目将缩小</p>
<p>如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。</p>
<p>负值对该属性无效。</p>
<blockquote>
<p>.section-nine-1{display: flex;}</p>
<p>.section-nine-1 span{width:300px;}</p>
<p>.section-nine-1>span:first-child{flex-shrink:2;}</p>
<p>.section-nine-1>span:nth-child(2){flex-shrink:3;}</p>
<p>.section-nine-1>span:nth-child(4){flex-shrink:4;}</p>
<p>.section-nine-1>span:nth-child(5){flex-shrink:2;}</p>
</blockquote>
<div class="section-nine-1">
<span class="one">1</span>
<span class="two">2</span>
<span class="three">3</span>
<span class="four">4</span>
<span class="five">5</span>
</div>
<blockquote>
<p>实例解析:</p>
<p>flex-shrink的默认值为1,如果没有显示定义该属性,将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。</p>
<p>本例中<b>显式定义</b>了</p>
<p>.section-nine-1>span:first-child==>flex-shrink: 2;</p>
<p>.section-nine-1>span:nth-child(2)==>flex-shrink:3</p>
<p>.section-nine-1>span:nth-child(4)==>flex-shrink:4</p>
<p>.section-nine-1>span:nth-child(5)==>flex-shrink:5</p>
<p><b>隐式定义</b>.section-nine-1>span:nth-child(3)==>flex-shrink:1</p>
<p>所以计算出来总共将剩余空间分成了 12 份,即2:3:1:4:2</p>
<p>我们可以看到父容器继承宽度为 1200px,子项被定义为 300px,子项相加之后即为 1500 px,超出父容器 300px。</p>
<p>那么超出的 300px 需要被 五个盒子消化通过收缩因子,所以加权综合可得 300*2+300*3+300*1+300*4+300*5=3600px。</p>
<p>于是我们可以计算 五个盒子 将被移除的溢出量是多少:</p>
<p>1 被移除溢出量:(300*2/3600)*300,即等于50px</p>
<p>2 被移除溢出量:(300*3/3600)*300,即等于75px</p>
<p>3 被移除溢出量:(300*1/3600)*300,即等于25px</p>
<p>4 被移除溢出量:(300*4/3600)*300,即等于100px</p>
<p>5 被移除溢出量:(300*2/3600)*300,即等于50px</p>
<p>最后1、2、3、4、5的实际宽度分别为:300-50=250px, 300-75=225px, 300-25=275px, 300-100=200px,300-50=250px,此外,这个宽度是包含边框的。</p>
</blockquote>
</section>
<section class="section-1">
<h1>10.1 <code> flex-basis</code>属性</h1>
<p><code> flex-basis</code>属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。</p>
<p>浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。</p>
<p>它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。</p>
<h1>10.2 <code>flex</code>属性</h1>
<p><code>flex</code>属性是<code>flex-grow</code>, <code>flex-shrink</code> 和 <code>flex-basis</code>的简写,默认值为0 1 auto。后两个属性可选。</p>
<p>该属性有两个快捷值:<code>auto (1 1 auto)</code> 和 <code>none (0 0 auto)</code>。</p>
<p> 建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。</p>
<h1>10.3 <code>align-self</code>属性</h1>
<p><code>align-self</code>属性允许单个项目有与其他项目不一样的对齐方式,可覆盖<code>align-items</code>属性。默认值为auto,表示继承父元素的<code>align-items</code>属性,如果没有父元素,则等同于stretch。</p>
<p>属性取值五个值:auto | flex-start | flex-end | center | baseline | stretch; 其作用和align-items 的作用一样。</p>
</section>
</body>
</html>
87.CSS Flex 弹性盒模型布局教程(共用的css在48篇文章gird)的更多相关文章
- 彻底搞懂flex弹性盒模型布局
为什么要用flex 基于css3简单方便,更优雅的实现,浏览器兼容性好,传统的css实现一个div居中布局要写一堆代码,而现在几行代码就搞定了,没有理由不用flex. 兼容性: Base Browse ...
- flex弹性盒模型布局
容器属性:1.flex-direction:项目的排列方向(1)row 主轴方向排列(2)row-reverse 主轴反方向排列(3)column 纵向排列(4)column-reverse 纵向反方 ...
- CSS3弹性盒模型布局模块介绍
来源:Robert’s talk原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-in ...
- 【css】弹性盒模型
弹性盒模型flexBox 弹性盒模型是c3的一种新的布局模式 它是指一种当页面需要适应不同屏幕大小以及设备类型时,确保元素有恰当行为的布局方式. 引入弹性盒模型布局的目的是提供一种更有效的方法来对一个 ...
- Flex 弹性盒模型
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Web的Flex弹性盒模型
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css之弹性盒模型
弹性盒子(Flexible Box/filebox)是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式.引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子 ...
- box flex 弹性盒模型(转载)
css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.这与XUL(火狐使用的用户交互语言)相似,其它语言也使用相同的盒模型,如XAML .GladeX ...
- columns分栏与flex弹性盒模型
columns 分栏 值:column-width:设置每列的宽度 column-count:设置列数 例:columns{200px 3} 列数和宽度固定 co ...
随机推荐
- RMP和YUM软件安装
1.卸载RPM包 rpm -e rpm包的名称 2.安装rpm包 rmp -ivh xxx.rpm 3.查询yum服务器是否有需要安装的软件 yum list|grep xxx软件列表 4.yum安装 ...
- GIL全局解释器锁及协程
GIL全局解释器锁 1.什么是GIL全局解释器锁 GIL本质是一把互斥锁,相当于执行权限,每个进程内都会存在一把GIL同一进程内的多线程,必须抢到GIL之后才能使用Cpython解释器来执行自己的代码 ...
- Python——IO多路复用之select模块poll方法
Python——IO多路复用之select模块poll方法 使用poll方法实现IO多路复用 .├── poll_client.py├── poll_server.py└── settings.py ...
- 【树状数组】【P5069】[Ynoi2015]纵使日薄西山
Description 给定一个长度为 \(n\) 的非负整数序列 \(\{a_n\}\),\(q\) 次操作,每次要么单点修改序列某个值,要么查询整个序列需要操作多少次才能变成全 \(0\). 一次 ...
- PATB1024科学计数法
代码是部分正确,只得了13分还有两个测试点没有通过,不知道原因是啥,先不深究了,赶进度. 参考代码: #include<cstdio> #include<cstring> #i ...
- Java调用api使用企业邮箱账户发送邮件
package cn.ucmed.otaka.healthcare.rubik.common; import lombok.extern.slf4j.Slf4j; import javax.mail. ...
- Centos开发小计
1. 生成静态库,linux下库的规则是lib开头 g++ -c code.cpp ar cr libcode.a code.o
- No module named 'paddle.fluid'
问题 win10笔记本,安装了paddlepadde,但是仍然报错,No module named 'paddle.fluid'. 解决 在py文件中,我先下载并且引入了paddle,后来又安装.引入 ...
- Java通过poi创建Excel文件并分页追加数据
以下的main函数,先生成一个excel文件,并设置sheet的名称,设置excel头:而后,以分页的方式,向文件中追加数据 maven依赖 <dependency> <groupI ...
- 【计算机视觉】stitching_detail算法介绍
已经不负责图像拼接相关工作,有技术问题请自己解决,谢谢. 一.stitching_detail程序运行流程 1.命令行调用程序,输入源图像以及程序的参数 2.特征点检测,判断是使用surf还是orb, ...