来了老弟，Flex弹性布局（常用）

最新推荐文章于 2021-09-08 17:42:38 发布

小渝学长

最新推荐文章于 2021-09-08 17:42:38 发布

阅读量149

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.youkuaiyun.com/weixin_44548718/article/details/90270912

HTML 专栏收录该内容

9 篇文章

订阅专栏

本文深入讲解Flex弹性布局，包括其基本概念、应用方法及关键属性，如flex-direction、flex-wrap等，帮助读者掌握响应式网页设计的核心技巧。

我们在编写页面的时候，页面的布局方面是非常重要的。

比如说你想要你写的页面它能随着浏览器的大小改变从而改变（也可以说是适应），要做到这样的话一个好布局是主要的一方面。

下面我要跟大家分享的就是一个布局的写法（Flexible Box），我们称之flex弹性布局（于2009年W3C提出的），从名字上我们顾名思义就应该能看出这个布局是具有弹性的咯！
好了，下面就开始深入了解下了

任何元素都可以用上这个布局

.box{
display:flex; //这是一个基本的写法
}
.box{
display:inline-flex; //这是一个行内元素写法
}

哦对了，设置flex布局之后该元素的子元素的那些居中与浮动之类就会无效了！

下面我们就把设置弹性布局的元素称之为一个容器了！（之前学的时候貌似就是这样叫的）
这个容器总共有六个属性可以用来给该容器当值（用来布局的）

flex-direction //该属性决定你编写在页面上的那些元素的排列方向，这个属性它带有四个值来（看下图）

上图忘了一点(就是的话该属性的默认值是row，就是说在你不给它赋值就默认是row)

flex-wrap //该属性的作用呢就是给容器设置如何换行的，有着3个值（具体看下图）
flex-flow //而这个属性呢是前面两个属性加起来的意思，所以另外两个的值这个都是能用的，也有两个值拼起来的（比如这个属性的默认值row nowrap，这个代表着是从左边水平方向排列的，并且不换行）
justify-content //这个属性呢是用来设置对齐方式的（如居中、靠左、靠右···）看下图

下面两个因小编不太常用到，所以也就没那么熟悉的说(就直接从别处搬一下了哈)
5. align-items //这个属性定义项目在交叉轴上如何对齐，它有5个值（看下方）

       stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
         flex-start：交叉轴的起点对齐。
            flex-end：交叉轴的终点对齐。
              center：交叉轴的中点对齐。
                baseline: 项目的第一行文字的基线对齐。

aligns-cont //该属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。它有6个值（看下方）

    tretch（默认值）：轴线占满整个交叉轴。
     flex-start：与交叉轴的起点对齐。
      flex-end：与交叉轴的终点对齐
       center：与交叉轴的中点对齐。
        space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
         space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍

上面就是这个布局常用的一些属性和值，还有一些就不全部写了哈！
（主要是小编不太熟后面的）
还有效果的哈自行体验