flex弹性盒模型

最新推荐文章于 2024-04-16 19:33:42 发布

VIP文章 zy_lalala

最新推荐文章于 2024-04-16 19:33:42 发布

阅读量644

点赞数 1

分类专栏： CSS 文章标签： html5 css html

本文链接：https://blog.csdn.net/zy_lalala/article/details/119958294

版权

CSS3弹性盒模型（Flex Box）

弹性盒子是 CSS3 的一种新的布局模式。

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

1. 传统布局和flex布局对比

1）传统布局

兼容性好
布局繁琐
局限性，不能再移动端很好的布局

2）flex布局

操作方便，布局极其简单，移动端使用比较广泛
pc端浏览器支持情况比较差
IE11或更低版本不支持flex或仅支持部分

3）建议

如果是pc端页面布局，还是采用传统方式
如果是移动端或者是不考虑兼容的pc则采用flex

2. flex布局原理

flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。
当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
flex布局又叫伸缩布局、弹性布局、伸缩盒布局、弹性盒布局
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

总结：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

3. 父项属性

flex-direction：设置主轴的方向
flex-wrap：设置子元素是否换行
flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap
justify-content：设置主轴上的子元素排列方式
align-items：设置侧轴上的子元素的排列方式（单行）
align-content：设置侧轴上的子元素的排列方式（多行）

案例代码：

<style>
  .big {
     
    display: flex;
    width: 450px;
    height: 450px;
    background-color: grey;

  .small {
     
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
  }

  .small:nth-child(even) {
     
    background-color: pink;
  }

  .small:nth-child(odd) {
     
    background-color: skyblue;
  }
</style>
<body>
  <div class="big">
    <div class="small">1</div>
    <div class="small">2</div>
    <div class="small">3</div>
    <div class="small">4</div>
    <div class="small">5</div>
    <div class="small">6</div>
    <div class="small">7</div>
  </div>
</body>

默认显示：

在这里插入图片描述

1）flex-direction 主轴方向

在 flex 布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x 轴和y 轴
默认主轴方向

最低0.47元/天解锁文章

zy_lalala

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
flex弹性盒模型

CSS3弹性盒模型（Flex Box）弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。1. 传统布局和flex布局对比1）传统布局兼容性好布局繁琐局限性，不能再移动端很好的布局2）flex布局操作方便，布局极其简单，移动端使用比较广泛pc端
复制链接

扫一扫