源代码在文章最下面
效果截图
此处为上面截图的源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex布局</title>
<style type="text/css">
/*默认样式*/
.ne_1 {
background: red;
font-size: 16px;
}
.ne_2 {
background: blueviolet;
font-size: 20px
}
.ne_3 {
background: burlywood;
font-size: 24px
}
.ne_bo {
height: 50px;
width: 50px;
}
.top_boa {
border: 1px solid #000;
}
/*加flex*/
</style>
</head>
<body>
<div class="top_bo">
<p>默认什么都没有的</p>
<div class="top_boa">
<div class="ne_bo ne_1 ">1</div>
<div class="ne_bo ne_2">2</div>
<div class="ne_bo ne_3">3</div>
</div>
<p>flex</p>
<style type="text/css">
.flex {
display: flex;
}
</style>
<div class=" top_boa flex">
<div class="ne_bo ne_1 ">1</div>
<div class="ne_bo ne_2">2</div>
<div class="ne_bo ne_3">3</div>
</div>
<p>一. flex-direction:row | row-reverse | column | column-reverse; </p>
<style type="text/css">
.flexD_r {
display: flex;
flex-direction: row;
}
.flexD_rr {
display: flex;
flex-direction: row-reverse;
}
.flexD_c {
display: flex;
flex-direction: column;
}
.flexD_cr {
display: flex;
flex-direction: column-reverse;
}
</style>
<p>1. row（默认值）：主轴为水平方向，起点在左端</p>
<div class=" top_boa flexD_r">
<div class="ne_bo ne_1 ">1</div>
<div class="ne_bo ne_2">2</div>
<div class="ne_bo ne_3">3</div>
</div>
<p>2.row-reverse:主轴为水平方向，起点在右端 </p>
<div class=" top_boa flexD_rr">
<div class="ne_bo ne_1 ">1</div>
<div class="ne_bo ne_2">2</div>
<div class="ne_bo ne_3">3</div>
</div>
<p>3.column:主轴为垂直方向，起点在上沿</p>
<div class=" top_boa flexD_c" style="height: 200px;">
<div class="ne_bo ne_1 ">1</div>
<div class="ne_bo ne_2">2</div>
<div class="ne_bo ne_3">3</div>
</div>
<p>4.column-reverse:主轴为垂直方向，起点在下沿</p>
<div class=" top_boa flexD_cr" style="height: 200px;">
<div class="ne_bo ne_1 ">1</div>
<div class="ne_bo ne_2">2</div>
<div class="ne_bo ne_3">3</div>
</div>
<p>二. flex-wrap: nowrap | wrap | wrap-reverse;</p>
<style type="text/css">
.wrap {
flex-wrap: wrap;
}
.nowrap {
flex-wrap: nowrap;
}
.wrap-reverse {
flex-wrap: wrap-reverse;
}
</style>
<p>1.nowrap（默认）：不换行</p>
<div class=" top_boa flexD_r wrap" style="width: 120px;">
<div class="ne_bo ne_1 ">1</div>
<div class="ne_bo ne_2">2</div>
<div class="ne_bo ne_3">3</div>
</div>
<p>2.wrap:换行，第一行在上方</p>
<div class=" top_boa flexD_r nowrap" style="width: 120px;">
<div class="ne_bo ne_1 ">1</div>
<div class="ne_bo ne_2">2</div>
<div class="ne_bo ne_3">3</div>
</div>
<p>3.wrap-reverse:换行，在第一行的下方</p>
<div class=" top_boa flexD_r wrap-reverse" style="width: 120px;">
<div class="ne_bo ne_1 ">1</div>
<div class="ne_bo ne_2">2</div>
<div class="ne_bo ne_3">3</div>
</div>
<p>三.flex-flow</p>
<p>flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认 row nowrap。 </p>
<!--<p>.box{flex-flow:<flex-direction> || <flex-wrap>;}</p>-->
<p>三. justify-content属性</p>
<p> justify-content:flex-start | flex-end | center | space-between |space-around;</p>
<style type="text/css">
.flex-start {
justify-content: flex-start;
}
.flex-end {
justify-content: flex-end;
}
.center {
justify-content: center;
}
.space-between {
justify-content: space-between;
}
.space-around {
justify-content: space-around;
}
</style>
<p>1.flex-start </p>
<div class=" top_boa flexD_r nowrap flex-start" style="width: 300px;">
<div class="ne_bo ne_1 ">1</div>
<div class="ne_bo ne_2">2</div>
<div class="ne_bo ne_3">3</div>
</div>
<p>2.flex-end </p>
<div class=" top_boa flexD_r nowrap flex-end" style="width: 300px;">
<div class="ne_bo ne_1 ">1</div>
<div class="ne_bo ne_2">2</div>
<div class="ne_bo ne_3">3</div>
</div>
<p>3.center</p>
<div class=" top_boa flexD_r nowrap center" style="width: 300px;">
<div class="ne_bo ne_1 ">1</div>
<div class="ne_bo ne_2">2</div>
<div class="ne_bo ne_3">3</div>
</div>
<p>4.space-between</p>
<div class=" top_boa flexD_r nowrap space-between" style="width: 300px;">
<div class="ne_bo ne_1 ">1</div>
<div class="ne_bo ne_2">2</div>
<div class="ne_bo ne_3">3</div>
</div>
<p>4.space-around</p>
<div class=" top_boa flexD_r nowrap space-around" style="width: 300px;">
<div class="ne_bo ne_1 ">1</div>
<div class="ne_bo ne_2">2</div>
<div class="ne_bo ne_3">3</div>
</div>
<p>它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。</p>
<p>.flex-start（默认值）：左对齐</p>
<p>.flex-end：右对齐</p>
<p>.center：居中</p>
<p>.space-between:两端对齐，项目之间的间隔都相等</p>
<p>.space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。</p>
<p>四. align-items属性</p>
<p>align-items属性定义项目在交叉轴上如何对齐。</p>
<p> align-items:flex-start | flex-end | center |baseline | stretch;</p>
<style type="text/css">
.itemStart {
align-items: flex-start;
}
.itemEnd {
align-items: flex-end;
}
.itemCenter {
align-items: center;
}
.itemBaseline {
align-items: baseline;
}
.itemStretch {
align-items: stretch;
}
</style>
<p>1.flex-start</p>
<div class=" top_boa flexD_r nowrap itemStart" style="width: 300px;height: 200px;">
<div class="ne_bo ne_1 ">1</div>
<div class="ne_bo ne_2 ">2</div>
<div class="ne_bo ne_3 itemStart">3</div>
</div>
<p>2.flex-end</p>
<div class=" top_boa flexD_r nowrap itemEnd" style="width: 300px;height: 200px;">
<div class="ne_bo ne_1 ">1</div>
<div class="ne_bo ne_2 ">2</div>
<div class="ne_bo ne_3 ">3</div>
</div>
<p>3.center</p>
<div class=" top_boa flexD_r nowrap itemCenter" style="width: 300px;height: 200px;">
<div class="ne_bo ne_1 ">1</div>
<div class="ne_bo ne_2 ">2</div>
<div class="ne_bo ne_3 ">3</div>
</div>
<p>4.baseline</p>
<div class=" top_boa flexD_r nowrap itemBaseline" style="width: 300px;height: 200px;">
<div class="ne_bo ne_1 ">1</div>
<div class="ne_bo ne_2 ">2</div>
<div class="ne_bo ne_3 ">3</div>
<div class="ne_bo ne_1 ">4</div>
<div class="ne_bo ne_2 ">5</div>
<div class="ne_bo ne_3 ">6</div>
</div>
<p>5.stretch</p>
<div class=" top_boa flexD_r nowrap itemstretch" style="width: 300px;height: 200px;">
<div class=" ne_1 " style="width: 50px;">1</div>
<div class="ne_2 " style="width: 50px;">2</div>
<div class=" ne_3 " style="width: 50px;">3</div>
</div>
<p>它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上之下。</p>
<p>.flex-start：交叉轴的起点对齐</p>
<p>.flex-end:交叉轴的终点对齐</p>
<p>.center：交叉轴的中点对齐</p>
<p>.baseline：项目的第一行文字的基线对齐。</p>
<p>.stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。</p>
<p>五. align-content属性</p>
<p>align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。</p>
<p> align-content:flex-start | flex-end | center | spance-between | space-around |stretch;</p>
<style type="text/css">
.flexStart {
align-content: flex-start;
}
.flexEnd {
align-content: flex-end;
}
.flexCenter {
align-content: center
}
.flexStretch {
align-content: stretch
}
.flexSpanceBetween {
align-content: space-between
}
.flexSpaceAround {
align-content: space-around
}
</style>
<p>1.flex-start</p>
<div class=" top_boa flexD_r wrap flexStart" style="width: 300px;height: 200px;">
<div class="ne_bo ne_1">1</div>
<div class="ne_bo ne_2">2</div>
<div class="ne_bo ne_3">3</div>
<div class="ne_bo ne_1">4</div>
<div class="ne_bo ne_2">5</div>
<div class="ne_bo ne_3">6</div>
<div class="ne_bo ne_1">7</div>
<div class="ne_bo ne_2">8</div>
<div class="ne_bo ne_3">9</div>
</div>
<p>2.flex-end</p>
<div class=" top_boa flexD_r wrap flexEnd" style="width: 300px;height: 200px;">
<div class="ne_bo ne_1">1</div>
<div class="ne_bo ne_2">2</div>
<div class="ne_bo ne_3">3</div>
<div class="ne_bo ne_1">4</div>
<div class="ne_bo ne_2">5</div>
<div class="ne_bo ne_3">6</div>
<div class="ne_bo ne_1">7</div>
<div class="ne_bo ne_2">8</div>
<div class="ne_bo ne_3">9</div>
</div>
<p>3.center</p>
<div class=" top_boa flexD_r wrap flexCenter" style="width: 300px;height: 200px;">
<div class="ne_bo ne_1">1</div>
<div class="ne_bo ne_2">2</div>
<div class="ne_bo ne_3">3</div>
<div class="ne_bo ne_1">4</div>
<div class="ne_bo ne_2">5</div>
<div class="ne_bo ne_3">6</div>
<div class="ne_bo ne_1">7</div>
<div class="ne_bo ne_2">8</div>
<div class="ne_bo ne_3">9</div>
</div>
<p>4.stretch</p>
<div class=" top_boa flexD_r wrap flexStretch" style="width: 300px;height: 200px;">
<div class="ne_bo ne_1">1</div>
<div class="ne_bo ne_2">2</div>
<div class="ne_bo ne_3">3</div>
<div class="ne_bo ne_1">4</div>
<div class="ne_bo ne_2">5</div>
<div class="ne_bo ne_3">6</div>
<div class="ne_bo ne_1">7</div>
<div class="ne_bo ne_2">8</div>
<div class="ne_bo ne_3">9</div>
</div>
<p>5.spance-between </p>
<div class=" top_boa flexD_r wrap flexSpanceBetween " style="width: 300px;height: 200px;">
<div class="ne_bo ne_1">1</div>
<div class="ne_bo ne_2">2</div>
<div class="ne_bo ne_3">3</div>
<div class="ne_bo ne_1">4</div>
<div class="ne_bo ne_2">5</div>
<div class="ne_bo ne_3">6</div>
<div class="ne_bo ne_1">7</div>
<div class="ne_bo ne_2">8</div>
<div class="ne_bo ne_3">9</div>
</div>
<p>6.space-around</p>
<div class=" top_boa flexD_r wrap flexSpaceAround" style="width: 300px;height: 200px;">
<div class="ne_bo ne_1">1</div>
<div class="ne_bo ne_2">2</div>
<div class="ne_bo ne_3">3</div>
<div class="ne_bo ne_1">4</div>
<div class="ne_bo ne_2">5</div>
<div class="ne_bo ne_3">6</div>
<div class="ne_bo ne_1">7</div>
<div class="ne_bo ne_2">8</div>
<div class="ne_bo ne_3">9</div>
</div>
<p>只适用多行的flex容器（也就是flex容器中的子项不止一行时该属性才有效果），它的作用是当flex容器在交叉轴上有多余的空间时，将子项作为一个整体（属性值为：flex-start、flex-end、center时）进行对齐</p>
<p>该属性可能取6个值。</p>
<p>.flex-start：与交叉轴的起点对齐。</p>
<p>.flex-end：与交叉轴的终点对齐。</p>
<p>.center：与交叉轴的中点对齐。</p>
<p>.space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。</p>
<p>.space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。</p>
<p>.stretch（默认值）：轴线占满整个交叉轴。</p>
<p>四、项目的属性</p>
<p>一下6个属性设置在项目上。</p>
<p> .order
<br /> .flex-grow
<br /> .flex-shrink
<br /> .flex-basis
<br /> .flex
<br /> .align-self
</p>
<p>4.1 order属性
<br /> order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0.
<!--order:<integer>-->
</p>
<style type="text/css">
.order .ne_1 {
order: 3;
}
.order .ne_2 {
order: 2;
}
.order .ne_3 {
order: 1;
}
</style>
<div class=" top_boa flexD_r wrap order" style="width: 300px;height: 200px;">
<div class="ne_bo ne_2">2</div>
<div class="ne_bo ne_3">3</div>
<div class="ne_bo ne_1">1</div>
</div>
<p>4.2 flex-grow属性</p>
<p>.flex-grow属性定义项目的放大比例，默认值为0，即如果存在剩余空间，也不放大。<br />
<!-- flex-grow:<number>;/* default 0*/-->
</p>
<style type="text/css">
.flex-grow .ne_1 {
flex-grow: 5;
}
.flex-grow .ne_2 {
flex-grow: 3;
}
.flex-grow .ne_3 {
flex-grow: 1;
}
</style>
</div>
<div class=" top_boa flexD_r wrap flex-grow" style="width: 300px;height: 200px;">
<div class="ne_bo ne_2">2</div>
<div class="ne_bo ne_3">3</div>
<div class="ne_bo ne_1">1</div>
</div>
<p>如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目为1，则牵着占据的剩余空间将比其他项多一倍</p>
<p>4.3 flex-shrink属性<br /> flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，改项目将缩小。
</p>
<!--flex-shrink:<number>;/* default 1 */-->
<style type="text/css">
.flex-shrink .ne_1 {
flex-shrink: 1;
}
.flex-shrink .ne_2 {
flex-shrink: 0;
}
.flex-shrink .ne_3 {
flex-shrink: 3;
}
</style>
</div>
<div class=" top_boa flexD_r flex-shrink" style="width: 300px;height: 200px; align-items: center">
<div class="ne_bo ne_1">1</div>
<div class="ne_bo ne_2">2</div>
<div class="ne_bo ne_3">3</div>
<div class="ne_bo ne_1">1</div>
<div class="ne_bo ne_2">2</div>
<div class="ne_bo ne_3">3</div>
<div class="ne_bo ne_1">1</div>
<div class="ne_bo ne_2">2</div>
<div class="ne_bo ne_3">3</div>
</div>
<p>Flex-shrink越小，被压缩的越小。特别的，当flex-shrink:0时，不会被压缩。</p>
</body>
</html>
本文详细解析Flex布局的各项属性，包括flex-direction、flex-wrap、justify-content、align-items和align-content，以及项目属性如order、flex-grow、flex-shrink等，通过实例展示不同属性值的效果。
扫一扫
388
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
