WEB开发之flex（弹性盒子）布局

最新推荐文章于 2022-08-03 19:32:33 发布

FL_csdn1

最新推荐文章于 2022-08-03 19:32:33 发布

阅读量574

点赞数 1

分类专栏： Web前端 HTML+ CSS 文章标签： css html flex 经验分享

本文链接：https://blog.csdn.net/FL_csdn1/article/details/116033828

版权

Web前端同时被 2 个专栏收录

21 篇文章 1 订阅

订阅专栏

HTML+ CSS

9 篇文章 0 订阅

订阅专栏

什么是flex布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，自由的操作容器中元素(项目)的排列方式，任何一个容器都可以指定Felx布局，注意，设置为Flex布局容器，子元素的float，clear，vertical-align属性会失效。
Flex布局也有很多叫法，如弹性布局，伸缩盒布局，弹性盒布局。

传统布局与Flex布局的比较

为了加深对Flex布局的理解，我们将传统布局与Flex布局做一个比较。

传统布局

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

flex弹性布局

操作方便，布局极为简单，移动端应用广泛
PC端浏览器支持情况较差
IE 11 或更低版本，不支持或仅部分支持

通过比较，可以给出一个中肯的建议，在PC端页面布局，还是使用传统布局，移动端布局或者是不考虑兼容性问题的PC端页面布局，还是使用flex弹性布局。

Flex布局原理

采用Flex布局的元素，称为Flex容器（flex container），简称容器，它的所有子元素自动成为容器成员，成为Flex项目（flex item），简称项目。
在这里插入图片描述

总结flex布局的原理： 通过给父盒子添加flex属性控制子元素的位置和排列方式

flex布局的使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flex弹性布局</title>

    <style>
      div {
        display: flex;
        width: 80%;
        height: 300px;
        background-color: skyblue;
        justify-content: space-around;
      }
      div span {
        width: 150px;
        height: 100px;
        background-color: aqua;
        margin-right: 5px;
        flex: 1;
      }
    </style>
  </head>

  <body>
    <div>
      <span>1</span>
      <span>1</span>
      <span>1</span>
    </div>
  </body>
</html>

我们使用Flex布局时，只需要在需要布局的盒子的父元素添加一个display：flex；属性

Flex布局常见的父项属性

flex-direction:设置主轴方向
属性值：row 默认值从左到右
row-reverse 从右到左
column 从上到下
column-reverse 从下到上
justify-content:设置主轴上的子元素排列方式
属性值：flex-start 默认值从头部开始，如果主轴是x轴，则从左到右
flex-end 从尾部开始排列
center 在主轴居中对齐（如果主轴x轴则水平居中）
space-around 评分剩余空间
space-between 两边贴边，再平分剩余空间
flex-wrap:设置子元素是否换行
flex布局中，默认的子元素是不换行的，如果父元素装不开，会缩小子元素的宽度，放到父盒子元素里面
属性值：nowrap 默认
wrap 换行显示
align-content:设置侧轴上的子元素排列方式（多行）
这样的多行情况在右换行的情况下使用
属性值：flex-start 默认值在侧轴的头部开始排列
flex-end 在侧轴的尾部开始排列
center 在侧轴中间显示
space-around 子项在侧轴平分剩余空间
space-between 子项在侧轴先分布在两头，在评分剩余空间
stretch 设置子项元素高度评分父元素高度
align-items:设置侧轴上的子元素排列方式（单行）
属性值：flex-start 从上到下
flex-end 从下到上
center 挤在一起居中（垂直居中）
stretch 拉伸（默认值）
flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap
flex-flow：row wrap;

主轴和侧轴是会变化的，主要看flex-direction设置谁为主轴，剩下的就是侧轴，子元素是根据主轴来排列的

Flex布局常见的子项属性

flex子项目占的份数
align-self 控制子项自己在侧轴的排列方式
order属性定义子项的排列顺序（前后顺序）
注意：order和z-index不一样，order移动只是排列顺序默认是0

FL_csdn1

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
WEB开发之flex（弹性盒子）布局

什么是flex布局Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，自由的操作容器中元素(项目)的排列方式，任何一个容器都可以指定Felx布局，注意，设置为Flex布局容器，子元素的float，clear，vertical-align属性会失效。Flex布局也有很多叫法，如弹性布局，伸缩盒布局，弹性盒布局。传统布局与Flex布局的比较为了加深对Flex布局的理解，我们将传统布局与Flex布局做一个比较。传统布局兼容性好布局繁琐局限性，不能在移
复制链接

扫一扫

专栏目录