Flex布局详解

IT那活儿发布于2023-01-11 13:19 / 1269人阅读

Flex布局详解

点击上方“IT那活儿”公众号，关注后了解更多内容，不管IT什么活儿，干就完了！！！

Flex布局是什么？

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

1. 任何一个容器都可以指定为Flex布局

.demo{
     display: flex;
}

2. 行内元素也可以使用Flex布局

.demo{
     display: inline-flex;
}

3. Webkit内核的浏览器，必须加上-webkit前缀

.demo{
     display: -webkit-flex;
     display: flex;
}

注：设为Flex布局后,子元素的float、clear和vertical-align属性将失效。

4. 常见术语

4.1 容器和项目(container / item)；

4.2 主轴与交叉轴(main-axis / cross-axis)；

4.3 起始线(main/cross-start)与结束线（main/cross-end)。

容器 container 的属性

1. flex-direction 主轴方向

1.1 row（默认值）：主轴为水平方向，起点在左端。

1.2 row-reverse：主轴为水平方向，起点在右端。

1.3 column：主轴为垂直方向，起点在上沿。

1.4 column-reverse：主轴为垂直方向，起点在下沿。

2. flex-wrap主轴一行满了换行

2.1 nowrap (默认值) 不换行压缩宽度。

2.2 wrap 换行。

2.3 wrap-reverses 反向换行。

3. flex-flow 1和2的组合

flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap。

.demo {
      flex-flow:  ; // flex-flow:row nowrap;
}

4. justify-content主轴元素对齐方式

4.1 flex-start (默认)靠着main-start对齐//参考常见术语(一般是左方向)。

4.2 flex-end 靠着main-end对齐//参考常见术语(一般是右方向)。

4.3 center 靠着主轴居中对齐//一般就是居中对齐。

4.4 space-between 两端对齐，靠着容器壁，剩余空间平分。

4.5 space-around 分散对齐，不靠着容器壁，剩余空间在每个项目二侧平均分配。

4.6 space-evenly 平均对齐，不靠着容器壁，剩余空间平分。

5. align-items交叉轴元素对齐方式//单行

5.1 flex-start：交叉轴的起点对齐。

5.2 flex-end：交叉轴的终点对齐。

5.3 center：交叉轴的中点对齐。

5.4 baseline: 项目的第一行文字的基线对齐。

5.5 stretch（默认值）伸展：如果项目未设置高度或设为auto，将占满整个容器的高度。

6. align-content 交叉轴行对齐方式多行（和 justify-content 属性一样）

项目的属性

1. flex-grow 长大

flex-grow：项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。

2. flex-shrinik 缩小

flex-shrink：项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。

3. align-self覆盖

align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于stretch。

4. order 排序

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

5. flex-basis 有效宽度

flex-basis ：在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

END

本文作者：池思敏

本文来源：IT那活儿（上海新炬王翦团队）

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/129483.html

弹性布局（display:flex;）属性详解

摘要：设为布局以后，子元素的和属性将失效。二基本概念采用布局的元素，称为容器，简称容器。它的所有子元素自动成为容器成员，称为项目，简称项目。如果项目只有一根轴线，该属性不起作用。四项目的属性注项目属性的全面理解较为复杂，可以参考文章一、Flex布局-前言 Flex是Flexible Box的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性,旨在提供一个更有效地布局、对齐方式，并且能够使容...

wangshijun 2019-08-30 15:55 评论0 收藏0
CSS实例详解：Flex布局

摘要：本文由云社区发表本文将通过三个简单的实例，实际应用上篇文章的基础理论知识，展示下布局是如何解决布局问题。通过对比其他的实现方式，可以看出使用布局可以优雅地实现相同的布局问题。本文由云+社区发表本文将通过三个简单的实例，实际应用上篇文章的基础理论知识，展示下Flex布局是如何解决CSS布局问题。一．垂直居中这里同时用非flex布局和flex布局两种方式来实现，可以对比两种实现方式...

RobinQu 2019-08-02 13:55 评论0 收藏0
CSS实例详解：Flex布局

摘要：本文由云社区发表本文将通过三个简单的实例，实际应用上篇文章的基础理论知识，展示下布局是如何解决布局问题。通过对比其他的实现方式，可以看出使用布局可以优雅地实现相同的布局问题。本文由云+社区发表本文将通过三个简单的实例，实际应用上篇文章的基础理论知识，展示下Flex布局是如何解决CSS布局问题。一．垂直居中这里同时用非flex布局和flex布局两种方式来实现，可...

Meathill 2019-04-29 15:35 评论0 收藏0
CSS实例详解：Flex布局

摘要：本文由云社区发表本文将通过三个简单的实例，实际应用上篇文章的基础理论知识，展示下布局是如何解决布局问题。通过对比其他的实现方式，可以看出使用布局可以优雅地实现相同的布局问题。本文由云+社区发表本文将通过三个简单的实例，实际应用上篇文章的基础理论知识，展示下Flex布局是如何解决CSS布局问题。一．垂直居中这里同时用非flex布局和flex布局两种方式来实现，可以对比两种实现方式...

Magicer 2019-08-30 15:54 评论0 收藏0
flex基础布局详解

摘要：系统性的介绍关于布局，也作为自学的一篇文章基础理念使用弹性盒子的意义是在任何尺寸的屏幕上改变其和其子元素的尺寸填充屏幕可用空间。属性一个布局的页面所具有的元素可分为类。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。 flex-tutorials 系统性的介绍关于flex布局，也作为自学的一篇文章 flex基础理念使用弹性盒子的意义是在任何尺寸的屏幕上改变其和其子元素的尺寸填充...

nemo 2019-08-30 15:53 评论0 收藏0