端午安康，今天讲的是Flex布局
网页属性Flex布局
容器
- flex-direction 容器内项目的排列方式
- row 项目从左往右排列（默认值）
- colum 项目从上往下排列
- row-reverse 项目从右往左排列
- colum-reverse 项目从下往上排列
- flex-wrap 项目放不下了是否换行
- nowrap 不换行（默认值）
- wrap 换行
- wrap 换行后翻转
- justify-content 项目在主轴上的对齐方式
- flex-start 排在容器的开始位置（默认值）
- flex-end 排在容器的末尾
- center 排在容器的中间
- space-between 项目之间有相同大小的空隙
- space-around 开始、结束以及项目之间有空隙，开始和结束的空隙是项目之间空隙的一半
- spance-evenly 开始、结束以及项目之间有空隙，空隙大小相同
- align-items 交叉轴的对齐方式
- flex-start：交叉轴的起点对齐。
- flex-end：交叉轴的终点对齐。
- center：交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
- align-content 多个主轴的对齐方式（多行，不常用）
- flex-start：与交叉轴的起点对齐。
- flex-end：与交叉轴的终点对齐。
- center：与交叉轴的中点对齐。
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
- space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch（默认值）：轴线占满整个交叉轴。
项目
order 项目排列顺序，数值越小，排列越靠前。默认为0
flex-grow 放大比例（剩余空间按比例分配）。默认为0，不放大
flex-shrink 缩小比例。默认为1，自动缩小
flex-basis 设置项目宽度，内容超出范围会自动变大
align-self 允许单个项目与其他项目有不同的对齐方式
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
background: red;
/* width: 30%; */
/* flex-shrink: 0; */
}
.box2 {
background: yellow;
/* width: 30%; */
/* flex-shrink: 0; */
}
.box3 {
background: blue;
/* width: 30%; */
/* flex-shrink: 0; */
}
.box4 {
background: green;
/* width: 30%; */
/* flex-shrink: 0; */
/* flex-grow: 1; */
}
.box5 {
background: gray;
/* width: 30%; */
/* width: 30px; */
flex-basis: 30px;
order: -1;
/* flex-shrink: 0; */
/* flex-grow: 1; */
align-self: flex-start;
}
.container {
height: 300px;
display: flex;
/* flex-direction: column-reverse; */
/* flex-wrap: wrap; */
justify-content: space-evenly;
align-items: center;
/* align-content: space-between; */
}
</style>
</head>
<body>
<div class="container">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
</div>
</body>
</html>
最后祝大家端午安康！！！
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-06-03，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
