vmbs.png
朋友们是否都想用flex语法，来达到这种居中的上下分布效果呢？
下面请跟着我走(●'◡'●)
1. 转换主轴
flex-direction: column;
不仅是将盒子上下排列，而是将父盒子的主（x）轴换到垂直方向。
fdc.png
2. 次轴居中
align-items: center;
在次（y）轴上居中。
aic.png
3. 主轴两边分布
justify-content: space-between;
最终让盒子在父盒子的主轴上两边分布
完整代码
display: flex;
flex-direction: column;
align-items: center;
justify-conent: space-between;
关注我，日更1个教程里没有的前端小知识点。
动动你发财的小手，给拎包哥点个赞吧！
朋友们是否都想用flex语法，来达到这种居中的上下分布效果呢？下面请跟着我走(●'◡'●) 1. 转换主轴 不仅是...
布局解决方案 水平居中布局 垂直居中布局 水平垂直都居中的布局 多列布局 多列等分布局 多列等高布局 在多列布局的...
#水平垂直居中布局： flex弹性布局，table-cell布局(父级table)，定位(多种方式); #如何安...
居中布局 一、水平居中布局 水平居中：absolute + transform: translateX(-50%)...
水平居中 垂直居中 垂直水平居中 已知元素的宽高的居中布局 定位居中布局 盒模型居中布局 图片的垂直水平居中(利用...
1.如何让一个div水平居中，垂直居中 方法一：使用绝对定位与margin 方法二：使用弹性布局 display：...
1：如何进行页面布局？ 弹性盒子： display:flex 可以实现 垂直，水平居中、垂直反序 flex-dir...
左右布局 左中右布局 水平居中 垂直居中 水平垂直居中 左右布局 float实现左右布局 子元素设置float: ...
div的水平垂直居中 flex布局，使用display: flex实现水平垂直居中 grid布局 使用grid布局...
本章将介绍父子元素宽高不定的CSS水平居中布局、垂直居中布局、垂直水平居中布局。学习如何写出布局不是内容关键，解决...
本文标题：弹性布局水平居中上下分布
本文链接：https://www.haomeiwen.com/subject/uolwtrtx.html
网友评论