main axis:水平的主轴
cross axis:垂直的交叉轴
main start:主轴的开始位置 cross start:交叉轴的开始位置
main end:主轴的结束位置 cross end:交叉轴的结束位置
项目默认沿主轴排列
单个项目占据的主轴空间:main size
单个项目占据的交叉轴空间:cross size
flex-direction: row/row-reverse/column/column-reverse;改变主轴;
row:默认值,从左到右;
row-reverse:从右到左;
column:从上到下;
column-reverse:从下到上;
justify-content:定义项目在主轴的对齐方式
justify-content:space-between/flex-start/flex-end/space-around/center;
space-between:两端对齐。
flex-start:从主轴的开始位置开始排列
flex-end:从主轴的结束位置开始排列
center:居中
space-around:拉手对齐,环绕对齐
flex-wrap:决定项目换行(超过盒子本身大小时换)。
nowrap:默认值,不换行;
wrap:换行显示
wrap-reverse:反转换行
display:方向
row:行
column:列
reverse:反转
space:空间
around:
环绕
flex-flow:flex-direction和flex-wrap的复合写法
交叉轴上的操作:
align-items:设置交叉轴的方向;
flex-start:交叉轴开始位置;
flex-end:交叉轴结束位置;
center:居中;
/* 多条主轴
多条主轴线的对齐方式 */
align-content: space-between;
/* space-between:两端对齐。
flex-start:从主轴的开始位置开始排列
flex-end:从主轴的结束位置开始排列
center:居中
space-around:拉手对齐,环绕对齐 */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
ul{
width:1000px;
height:300px;
border:1px solid red;
margin:auto;
display:flex;/* 设为布局 */
/* 主轴上的操作 */
flex-direction:row; /* row:默认值 */
/* 换行 */
flex-wrap:nowrap;
justify-content:space-between;
flex-flow:row wrap;/*flex-flow:flex-direction和flex-wrap的复合写法*/
/* 交叉轴上的操作:
align-items:设置交叉轴的方向;
flex-start:交叉轴开始位置;
flex-end:交叉轴结束位置;
center:居中; */
align-items:flex-start;
/* 多条主轴
多条主轴线的对齐方式 */
align-content: space-between;
/* space-between:两端对齐。
flex-start:从主轴的开始位置开始排列
flex-end:从主轴的结束位置开始排列
center:居中
space-around:拉手对齐,环绕对齐 */
: }
li{
width:180px;
height:50px;
border:1px solid #FFFFFF;
background-color:darkred;
text-align:center;
line-height:50px;
list-style:none;/* 去掉无序列表前的小黑点 */
}
</style>
</head>
<body>
<ul>
<li>我的音乐</li>
<li>个人中心</li>
<li>看点</li>
<li>首页</li>
<li>发现</li>
<li>喜欢</li>
</ul>
</body>
</html>
flex布局
最新推荐文章于 2023-06-16 14:25:52 发布