css 弹性布局flex介绍
程序员文章站
2022-04-30 09:10:40
...
父级
使用弹窗布局 display: flex
横向对齐方式
- justify-content : flex-start //默认靠左
- : center //居中
- : flex-end //靠右
- : space-around //分布对齐
- : space-between //两端对齐
纵向对齐方式
- align-items :center //垂居中
- :flex-start //顶部默认
- :flex-end //底部
排列方式
- flex-direction :row //横向 默认
- :row-reverse //横向相反
- :column //纵向
- :column-reverse //纵向相反
- 超出部分强制在一行/不换行
- flex-wrap : now rap //不换行默认
- : wrap //换行
多行垂直排列
- align-content :center //居中
- :flex-end //底部
- :flex-start //顶部
- :stretch //默认
组合使用
flex-flow: column wrap 等于 flex-direction: column; flex-wrap: wrap
子级
覆盖父容器的aligin-item
- align-self: :center //居中
- :flex-end //底部
- :flex-start //顶部
- :stretch //默认
- flex-basis: auto 设置盒子大小 只能为正数 min/max-width>width>flex-basis
flex分大小
- flex: 1
- flex-grow元素放大
- flex-grow: 1 //默认0 父容器有多余空间 进行分配
order顺序
- order: 0 //越小越往前 默认0 可正数可负数
- flex-shrink 计算收缩 默认是1 与flex-basis计算为最终的宽度
例如：总宽500 有五个盒子abcd ，宽度都是 flex-basis: 120px ；则多出100px cd分别flex-shrink：2,
总数 100*1+100*1+100*1+100*2+100*2=700px
a 被移除溢出量：(100*1/700)*100，即约等于14px b 被移除溢出量：(100*1/700)*100，即约等于14px c 被移除溢出量：(100*1/700)*100，即约等于14px d 被移除溢出量：(100*2/700)*100，即约等于28px e 被移除溢出量：(100*2/700)*100，即约等于28px
after 最后一栏未能均衡排版问题 当每行只有3个时候可以使用以下方式 大于3不能使用
<style>
ul {
display: flex;
width: 600px;
border: 1px solid black;
justify-content: space-between;
flex-wrap: wrap;
}
li {
width: 200px;
height: 200px;
padding: 10px;
background: yellow;
box-sizing: border-box;
}
ul::after {
content: '';
width: 200px;
height: 200px;
}
</style>
<body>
<ul>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
</ul>
</body>
</html>超过3个 使用占位
代码如下：
<style>
.big {
width: 100%;
height: 400px;
width: 400px;
border: 1px solid #000000;
display: flex;
/* justify-content: flex-start; */
/* 靠左默认 */
/* justify-content: center; */
/* 居中 */
/* justify-content: flex-end; */
/* 靠右 */
/* justify-content: space-around; */
/* 分布对齐 */
/* justify-content: space-between; */
/* 两端对齐 */
/* 垂直居中 */
/* align-items: center; */
/* 默认顶部 */
/* align-items: flex-start; */
/* 底部 */
/* align-items: flex-end; */
/* 排列方式 */
/* 横向排列默认 */
/* flex-direction: row; */
/* 横向相反排列 */
/* flex-direction: row-reverse; */
/* 纵向排列 */
/* flex-direction: column; */
/* 纵向相反排列 */
/* flex-direction: column-reverse; */
/*超出部分强制在一行/不换行 */
/* flex-wrap: nowrap; */
/*换行 */
/* flex-wrap: wrap; */
/* 多行垂直排列 */
/*居中 */
/* align-content: center; */
/*底部 */
/* align-content: flex-end; */
/*顶部 */
/* align-content: flex-start; */
/*默认 */
/* align-content: stretch; */
/* 组合使用 */
/* flex-direction: column; flex-wrap: wrap; */
/* 等于以上的方式 */
/* flex-flow: column wrap; */
}
/* 以下是子元素的属性 */
.small {
width: 50px;
height: 50px;
background: #bbbbbb;
}
/* 总共三份 a1占1份 a2占2份 */
/* 如果a1不给任何宽度，默认文字内容宽度，其余宽度全部给a2 */
/* 如果a1给固定宽度，其余多余的宽度全部给a2 */
.a1 {
flex: 1;
/* 定义子元素放大默认是0 */
/* flex-grow: 1; */
}
.a2 {
flex: 2;
}
/* 覆盖父级的 align-content */
/* center flex-start stretch */
.a3 {
/* align-self: flex-end; */
/* order 规定子元素排列顺序 默认是0 值越小 越靠前 */
order: 0;
}
</style>
<body>
<div class="big">
<div class="small a1">1</div>
<div class="small a2">2</div>
<div class="a3">3</div>
</div>
</body>上一篇： java 常见异常