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

LeanCloud 发布于2019-08-05 18:10 / 3369人阅读

摘要：设为布局以后，子元素的和属性将失效。二基本概念采用布局的元素，称为容器，简称容器。它的所有子元素自动成为容器成员，称为项目，简称项目。如果项目只有一根轴线，该属性不起作用。四项目的属性注项目属性的全面理解较为复杂，可以参考文章

一、Flex布局-前言

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性,旨在提供一个更有效地布局、对齐方式，并且能够使容器中的子元素大小未知或动态变化情况下仍然能够分配好子元素之间的空间。

Flex 布局的主要思想是使父容器能够调节子元素的宽度/高度（和排列顺序），从而能够最好地填充可用空间（主要是为了适应所有类型的显示设备和屏幕尺寸）。flex布容器能够放大子元素使之尽可能填充可用空间，也可以收缩子元素使之不溢出。

最重要的是，flexbox布局与方向无关，不同于常规布局（基于垂直的块（block）和基于水平的内联（inline））。虽然传统布局适用于页面，但它们对于大型或复杂的应用程序布局来说缺乏灵活性（特别是在改变方向，调整大小，拉伸，收缩等方面）。

注:

Flexbox布局最适合应用程序的组件和小规模布局，而 Gird 布局则适用于较大规模的布局。

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

二、基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

三、容器的属性

display:flex;

flex-direction

justify-content

space-around 和 space-between 这两个值的区别不能很直观的理解。
space-between 是两端对齐，使每个矩形子元素(flex项)之间的间隔是相等的，但两端的矩形子元素(flex项)不会和容器之间产生间隔。

space-around 则会在每个矩形子元素(flex项)的两边产生一个相同大小的间隔，也就是说两端的矩形子元素(flex项)和容器之间的间隔大小正好是两个矩形子元素(flex项)之间间隔大小的一半（每个矩形子元素产生的间隔不会重叠，所以间隔变成两倍）。

align-items

（注意对于 align-items: stretch 来说，必须将每一个矩形子元素(flex项)的高度设置为 auto，否则 height 属性将会覆盖该 stretch）

对于 align-items: baseline 来说，要注意如果去掉段落标签或者没内容，矩形子元素(flex项)就会按照每个矩形的底部对齐，如下图所示：

为了更好地演示主轴和交叉轴的区别，让我们结合 justify-content和align-items，看看在 flex-direction 两个不同属性值的作用下，轴心有什么不同：

align-content

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

四、项目的属性

注：项目属性的全面理解较为复杂，可以参考文章：https://www.html.cn/archives/...
https://www.html.cn/archives/...

云服务器混合云属性详解属性选择器详解 Mask属性详解 Qt属性系统详解

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

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

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

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

wangshijun 2019-08-30 15:55 评论0 收藏0
FlexBox 布局详解

摘要：很久没有写博客了，这里把之前学习布局的一篇笔记整理了一下。其在文档流中的直接子元素将成为。子元素在容器内排列的方向称为主轴，跟主轴垂直的方向称为辅轴。很久没有写博客了，这里把之前学习 flex 布局的一篇笔记整理了一下。发布到博客上。赶一个五月的末班车吧。还是得坚持啊!! flex 弹性布局FlexBox 可控制子元素: 水平或垂直排成一行控制子元素的对齐方式控制子元素的高度／...

incredible 2019-08-29 12:42 评论0 收藏0
FlexBox 布局详解

摘要：很久没有写博客了，这里把之前学习布局的一篇笔记整理了一下。其在文档流中的直接子元素将成为。子元素在容器内排列的方向称为主轴，跟主轴垂直的方向称为辅轴。很久没有写博客了，这里把之前学习 flex 布局的一篇笔记整理了一下。发布到博客上。赶一个五月的末班车吧。还是得坚持啊!! flex 弹性布局FlexBox 可控制子元素: 水平或垂直排成一行控制子元素的对齐方式控制子元素的高度／...

you_De 2019-08-01 16:57 评论0 收藏0
CSS display 属性详解

摘要：如果项目只有一根轴线，该属性不起作用。后两个属性可选。弹性比为的子代占据父代框的空间是弹性比为的同级属性的两倍。其默认值为，也就是不具有弹性。此元素会根据上下文作为块级元素或内联元素显示栅格模型，类似栅格模型，类似转自属性详解作者 display的所有属性 {/* CSS 1 */ display: none; display: inline; display: block; disp...

xingqiba 2019-08-29 12:41 评论0 收藏0
CSS display 属性详解

摘要：如果项目只有一根轴线，该属性不起作用。后两个属性可选。弹性比为的子代占据父代框的空间是弹性比为的同级属性的两倍。其默认值为，也就是不具有弹性。此元素会根据上下文作为块级元素或内联元素显示栅格模型，类似栅格模型，类似转自属性详解作者 display的所有属性 {/* CSS 1 */ display: none; display: inline; display: block; disp...

wenyiweb 2019-08-05 11:21 评论0 收藏0