flex伸缩布局

主轴：默认水平方向
侧轴：默认竖直方向
方向：主轴默认从左到右，侧轴默认从上到下
主轴侧轴可以通过flex-direction互换

使用

1 设置父盒子宽高，将父盒子设置为伸缩盒子 display:flex
2 明确主轴的方向 flex-direction 默认是row 纵向是column
3 设置父盒子属性调整子元素的布局
4 设置子盒子的宽高或者比例，如：均分，在子盒子中设置 flex:1 （每项占一分）

属性介绍
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • flex 伸缩布局
    一、Flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最...
    吉他手_c156阅读 866评论 0赞 1
  • 28-（flex）伸缩布局/弹性布局
    主轴和侧轴 注意：flex：将一个容器设置为块伸缩容器inline-flex：将一个容器设置为内联 伸缩容器 注意...
    晚溪呀阅读 1,226评论 0赞 1
  • flex伸缩布局
    CSS3引入了一种新的布局模式——Flexbox布局，即伸缩布局盒模型（Flexible Box） Flexbox...
    翔阿翔阿翔阅读 717评论 0赞 8
  • flex伸缩布局
    flex 布局方向 = 设定主轴为X轴或Y轴 项目排列方向=改变主轴正方向 旧版flex 容器 display :...
    fb941c99409d阅读 420评论 0赞 0
  • flex 伸缩布局
    1、设置伸缩布局 2、设置固定宽度 flex-basis 3、弹性盒子实现多行排列 flex-wrap...
    苦咖啡Li阅读 1,452评论 0赞 1