目录
justify-content 设置主轴方向的对齐方式 （重要）**
flex-basis 设置子元素在父元素的主轴方向上所占空间的大小
align-self 该属性可以设置单个子元素的垂直于主轴方向的对齐方式
弹性布局特点/说明
1.弹性布局是css3推出的布局方式
2.低版本浏览器不支持
3.所有的移动端都支持
设置弹性容器（弹性盒子）
块元素设置弹性容器：
dispiay：flex：
行元素设置弹性容器：
display：inline-flex
一般行不会设置为弹性容器
设置弹性布局只需要给父容器设置display：flex
flex-direction 设置主轴的方向
row：默认值，主轴为水平方向，起点在左边
row-reverse 主轴为水平方向，起点在右边（镜像）
column 主轴为垂直方向，起点在上边
column-reverse 主轴为垂直方向，起点在下边
flex-wrap 设置子元素是否换行
nowrap 默认值，不换行，子元素可能会被压缩
warp 换行，行的起点在上边
warp-reverse 换行，行的起点在下边
以上两个属性可以合写为 fiex-flow
fiex-flow:
direction (方向)
wrap（是否换行）;
align-content设置多行元素之间的排列方式
center
stretch 默认值，
如果子元素没有设置高度，会被拉伸
flex-start
根据主轴方向排列元素，第二排紧跟第一排， 他们之间的距离不会被弹性拉伸。
flex-end
根据主轴方向排列元素，第二排紧跟第一排，并且他们的起始位置在主轴的垂直方向的下边（居下）
space-around 行间距平分
space-between
第一行和最后一行分别出现在垂直主轴方向的上边和下边，如果有第三行则行间距相等。
justify-content 设置主轴方向的对齐方式 （重要）**
flex-start （默认值） 从左到右
flex-end 从右到左
center 居中
space-around
在主轴方向把父级整体的尺寸分按照子元素的数量平分，并且子元素在平分的尺寸范围内居中
space-between
第一个子元素在主轴起始位置第二个子元素在主轴结束位置。如果子元素的数量大于等于三，则每一个子元素之间的间距相等，第一个子元素在主轴起始位置第二个子元素在主轴结束位置。
Y轴 是 垂直于主轴方向
align-items: ; 设置垂直于主轴方向的对齐方式
flex-start
Y轴的起始点 ，如果子元素没有高度则不会被拉伸
flex-end
Y轴 的结束点
center 垂直居中
stretch
默认值,如果子元素没有高度则会被拉伸
baseline 基线对齐
相关代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性布局</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style-type: none;
}
.wp{
width: 500px;
/* height: 300px; */
background-color: #f00;
/* 设置弹性盒子 */
display: flex;
/* 设置主轴的方向 */
flex-direction: row;
/* 设置子级是否折行/换行 */
flex-wrap: wrap-reverse;
/* 以上两个属性可以合写（不推荐） */
flex-flow: row wrap;
align-content: space-between;
}
.wp div{
width: 100px;
height: 100px;
background-color: #f60;
margin: 10px;
}
.wp2{
width: 1000px;
height: 300px;
background-color: #f00;
margin: 30px auto;
display: flex;
/* 设置主轴方向的对齐方式 */
justify-content: space-between;
/* 设置垂直于主轴方向的对齐方式 */
align-items: baseline;
}
.wp2 li{
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
</head>
<body>
<!--
弹性布局
1.弹性布局是css3推出的布局方式
2.低版本浏览器不支持
3.所有的移动端都支持
设置弹性容器（弹性盒子）
块 -》 弹性容器：
dispiay：flex：
行元素设置弹性容器：
display：inline-flex
一般行不会设置为弹性容器
设置弹性布局只需要给父容器设置display：flex
flex-direction 设置主轴的方向
row：默认值，主轴为水平方向，起点在左边
row-reverse 主轴为水平方向，起点在右边（镜像）
column 主轴为垂直方向，起点在上边
column-reverse 主轴为垂直方向，起点在下边
flex-wrap 设置子元素是否换行
nowrap 默认值，不换行，子元素可能会被压缩
warp 换行，行的起点在上边
warp-reverse 换行，行的起点在下边
以上两个属性可以合写为 fiex-flow
fiex-flow:direction (方向) wrap（是否换行）;
align-content设置多行元素之间的排列方式
center
stretch 默认值，如果子元素没有设置高度，会被拉伸
flex-start 根据主轴方向排列元素，第二排紧跟第一排，
他们之间的距离不会被弹性拉伸。
flex-end 根据主轴方向排列元素，第二排紧跟第一排，
并且他们的起始位置在主轴的垂直方向的下边（居下）
space-around 行间距平分
space-between 第一行和最后一行分别出现在垂直主轴方向
的上边和下边，如果有第三行则行间距相等。
justify-content 设置主轴方向的对齐方式 （重要）******
flex-start （默认值） 从左到右
flex-end 从右到左
center 居中
space-around 在主轴方向把父级整体的尺寸分按照子元素的数量平分
，并且子元素在平分的尺寸范围内居中
space-between 第一个子元素在主轴起始位置第二个子元素在主轴结束位置。
如果子元素的数量大于等于三，则每一个子元素之间的间距相等，第一个子元素
在主轴起始位置第二个子元素在主轴结束位置。
Y轴 是 垂直于主轴方向
align-items: ; 设置垂直于主轴方向的对齐方式
flex-start Y轴的起始点 ，如果子元素没有高度则不会被拉伸
flex-end Y轴 的结束点
center 垂直居中
stretch 默认值,如果子元素没有高度则会被拉伸
baseline 基线对齐
-->
<div class="wp">
<div>小乔</div>
<div>大乔</div>
<div>甄姬</div>
<div>貂蝉</div>
<div>孙尚香</div>
<div>曹操</div>
<div>杨玉环</div>
<div>伽罗</div>
<div>公孙离</div>
<div>安其拉</div>
</div>
<ul class="wp2">
<li>林七夜</li>
<li>安卿鱼</li>
<li>伽蓝</li>
<li>百里胖胖</li>
</ul>
</body>
</html>设置弹性布局子级内容的属性
order
设置单个弹性布局的顺序,order的值越大元素越靠后，默认值是0
flex-grow 设置元素的放大比例，
默认值为0不放大 使用条件是 他的总宽度小于父元素的宽度
元素的最终宽度= 元素宽度 + flex-grow 的值/总flex-grow的值*总体剩余宽度
flex-shrink 设置元素的缩小比例
默认值为1从，使用条件是 总宽度大于父元素的宽度，如果值为0则表示不缩小，保持原宽度0
flex-basis 设置子元素在父元素的主轴方向上所占空间的大小
他的值可以是具体值，也可以是百分比，默认是auto ，auto的
含义是遵循给该子元素设置的 width值
以上三个属性可以合写
fiex： flex-grow fiex- shrink flex-basis；
因此默认值是:flex:0 1 auto;
后面两个属性非必写项
可以简写 flex：flex-grow：
flex：1
align-self 该属性可以设置单个子元素的垂直于主轴方向的对齐方式
它可以覆盖 align-items 设置的方式
align-self的属性值和 align-items 相同，意义相同
相关代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性布局的子元素设置</title>
<style>
*{
margin: 0;
padding: 0;
}
section{
width: 500px;
height: 300px;
margin: 0 auto;
background-color: antiquewhite;
display: flex;
align-items: center;
}
section div{
width: 60px;
height: 60px;
margin: 10px 5px ;
background-color: #ff0;
}
.o1{
order: 10;
}
.o2{
order: 8;
}
/* 当父元素的宽度大于所有子元素的宽度设置比例大小 */
.grow1{
flex-grow: 1;
}
.grow2{
flex-grow: 3;
}
/* 当父元素的宽度小于所有子元素的宽度设置比例大小 */
.sh1{
flex-shrink: 3;
}
.sh2{
flex-shrink: 6;
}
.sh3{
flex-shrink: 0;
}
/* 设置子元素所占的空间比例 */
.bas1{
flex-basis: 100px;
}
.bas2{
flex-basis: 30%;
}
.fl1{
flex: 1;
}
.fl2{
flex: 3;
}
.self{
align-self: flex-end;
}
</style>
</head>
<body>
<!--
设置弹性布局子级内容的属性
order 设置单个弹性布局的顺序,order的值越大元素越靠后
，默认值是0
flex-grow 设置元素的放大比例，默认值为0不放大 使用条件是 他的总宽度小于父元素的宽度
元素的最终宽度= 元素宽度 + flex-grow 的值/总flex-grow的值*总体剩余宽度
flex-shrink 设置元素的缩小比例，默认值为1从，使用条件是 总宽度大于父元素
的宽度，
如果值为0则表示不缩小，保持原宽度0
flex-basis 设置子元素在父元素的主轴方向上所占空间的大小
他的值可以是具体值，也可以是百分比，默认是auto ，auto的
含义是遵循给该子元素设置的 width值
以上三个属性可以合写
fiex： flex-grow fiex- shrink flex-basis；
因此默认值是:flex:0 1 auto;
后面两个属性非必写项
可以简写 flex：flex-grow：
flex：1
align-self 该属性可以设置单个子元素的垂直于主轴方向的对齐方式
它可以覆盖 align-items 设置的方式
align-self的属性值和 align-items 相同，意义相同
-->
<h2>flex-grow</h2>
<section style="width: 1000px;">
<div>林七夜</div>
<div class="o1">安卿鱼</div>
<div class="o2">珈蓝</div>
<div>曹渊</div>
<div class="grow1">百里胖胖</div>
<div class="grow2">深青竹</div>
<div>江洱</div>
<div>门之钥</div>
</section>
<h2>flex-shrink</h2>
<section style="width: 500px;">
<div>林七夜</div>
<div >安卿鱼</div>
<div class="sh3" >珈蓝</div>
<div>曹渊</div>
<div class="sh1">百里胖胖</div>
<div class="sh2">沈青竹</div>
<div>江洱</div>
<div>门之钥</div>
</section>
<h2>flex-basis</h2>
<section style="width: 1000px;">
<div>林七夜</div>
<div>安卿鱼</div>
<div>珈蓝</div>
<div>曹渊</div>
<div class="bas1">百里胖胖</div>
<div class="bas2">深青竹</div>
<div>江洱</div>
<div>门之钥</div>
</section>
<h2>合写</h2>
<section style="width: 1000px;">
<div class="self"> 林七夜</div>
<div>安卿鱼</div>
<div>珈蓝</div>
<div>曹渊</div>
<div class="fl1">百里胖胖</div>
<div class="fl2">深青竹</div>
<div>江洱</div>
<div>门之钥</div>
</section>
</body>
</html>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
