2022-04-06 flex 布局

主轴方向

使用flex-direction改变元素排列方向

1，主轴默认是水平方向, 侧轴默认是垂直方向
2， 修改主轴方向属性: flex-direction


flex-direction取值.png

弹性盒子换行

使用flex-wrap实现弹性盒子多行排列效果

弹性盒子换行显示 : flex-wrap: wrap;
l 调整行对齐方式 ：align-content
Ø 取值与justify-content基本相同

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • Flex布局：Flex布局
    1、flex布局与传统布局的区别 传统布局： 兼容性好但是布局繁琐 局限性，不能再移动端很好的布局 flex布局：...
    听书先生阅读 5,317评论 0赞 42
  • 流式布局&flex布局
    流式布局 1. 移动端基础 1.1浏览器现状 1.2手机屏幕的现状 1.3常见移动端屏幕尺寸 1.4移动端调试方法...
    Scincyc阅读 1,578评论 0赞 4
  • Day06 Javascript 、 es6、flex布局
    定时器（两种） setTimeout() setInterval() setTimeout() 炸弹定时器 开启定...
    le_u阅读 280评论 0赞 1
  • 弹性布局flex
    后盾人CSS课程学习笔记 CSS3 弹性盒模型（Flex Box） 弹性盒子是 CSS3 的一种新的布局模式。 C...
    魔炫Max阅读 529评论 0赞 1
  • 移动WEB开发之flex布局
    学习目标： 能够说出flex盒子的布局原理 能够使用flex布局的常用属性 能够独立完成携程移动端首页案例知识点：...
    皮皮章阅读 448评论 0赞 0

友情链接更多精彩内容