本文介绍了在CSS Flex布局中如何利用flex-wrap属性实现元素的居中显示。重点讨论了display属性切换为flex的注意事项，以及flex-wrap的nowrap、wrap和wrap-reverse三种情况对元素换行和布局的影响。同时提到了justify-content和align-items属性在调整主轴和交叉轴位置上的作用。
Flex布局中flex-warp实现居中
今天尝试了cssFlex布局中flex-warp的实现，记录一下需要注意的地方：
1.首先想使用flex布局必须要在容器中display属性改为flex。
display属性是没有继承性的，所以父类定义了flex，子类想使用flex布局也要定义一下display。行内元素定义需要加inline。
有一点需要注意，设为flex布局后，属性float会失效！
//容器
display:flex;
//行内元素
display:inline-flex;
2.flex布局中X轴被称为main主轴，Y轴被称为cross跨越轴。
main轴开始位置为main start，cross轴开始位置为cross start。总长用axis。
使用flex-warp属性时需要定义display属性。
实践中，定义div宽度：
- flex-warp属性值为nowarp时子元素不会换行，且子元素的宽度会在一定范围内强制更改。
- flex-warp属性值为warp时，元素会根据浏览器大小自动换行。（flex布局很适合手机与电脑通用的开发）
- flex-warp属性值为warp-reverse时，元素也会根据浏览器大小换行，不同的是第一行是在浏览器下方。
属性笔记：
border-radius：1-4 lenght|% / 1-4 lenght|%; 添加圆角边框，1-4对应 左上 右上 右下 左下 （ / 是完整写法 表示弧度 ）
padding 控制边框宽度
justify-content ; align-items分别控制项目在主轴(main)和交叉轴(cross)位置
text-align ; line-height 与flex布局做对比 同样分别控制项目在x与y的位置，center是定义横向位置的，所以这种方式在竖直居中中的应用非常不方便。
上述两个属性都是作用在content内容中
<!DOCTYPE html>
最低0.47元/天 解锁文章
扫一扫
1623
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
