Flex 布局详解 - 转自阮一峰老师

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何的盒子都可以使用它。

下面我们来看一下使用 Flex 布局的容器的属性

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

`1.flex-direction`属性决定主轴的方向（即项目的排列方向）。


.box {flex-direction: row | row-reverse | column | column-reverse;
}

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

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

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

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

2. flex-wrap 属性

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下就设置换行。

.box{flex-wrap: nowrap | wrap | wrap-reverse;
}

（1）nowrap（默认）：不换行。

（2）wrap：换行，第一行在上方。

（3）wrap-reverse：换行，第一行在下方。

3. justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。


.box {justify-content: flex-start | flex-end | center | space-between | space-around;
}

它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

flex-start（默认值）：左对齐

flex-end：右对齐

center：居中

space-between：两端对齐，项目之间的间隔都相等。

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

4. align-items属性

align-items属性定义项目在交叉轴上如何对齐。


.box {align-items: flex-start | flex-end | center | baseline | stretch;
}

它可能取5个值。具体的对齐方式与轴交叉的方向有关，下面假设交叉轴从上到下。

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

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

center：交叉轴的中点对齐。

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

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

5. align-content属性

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


.box {align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

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

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

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

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

stretch（默认值）：轴线占满整个交叉轴。

Flex 布局详解 - 转自阮一峰老师相关推荐

最简单的flex布局介绍（转自阮一峰）及筛子案例
大佬阮一峰在15年的博客至今我认为无人可以超越所以就直接引用他的博客 Flex 布局教程:语法篇 - 阮一峰的网络日志 (ruanyifeng.com) 在引用之后为一个flex布局小demo Fl ...
flutter listview 滚动到底部_Flutter系列之Flex布局详解
PS:长期坚持是一件很难的事. Flutter 是 Google 推出的跨平台 UI 框架,可以快速地在 Android 和 IOS 上构建高质量的应用程序,其主要特点是 Flutter 具有快速开发 ...
移动Web开发 ----- Flex布局详解
文章目录 1 Flex布局简介 2 Flex布局基本概念 3 容器属性 3.1 display 3.2 flex-direction 3.3 flex-warp 3.4 justify-content ...
在html5中flex布局详解,Flex布局详解（一）
在讲解Flex布局之前,我们首先可以回顾一下我们平时在做行向布局或者纵向布局时候我们页面的布局主要用到哪些布局方法或者思路. 1.normal flow (正常流,也叫文档流)--内联元素从左往右排列 ...
flex 解析 html5,Flex布局详解
传统的布局解决方案,在处理一些特殊的布局方式时,非常繁琐,比如垂直居中实现起来就很不方便.而Flex在布局方面能给开发者带来极大的便利. Flex,Flexible Box的缩写,意为:弹性布局. 任 ...
flex 布局详解易懂总结(flex-direction justify-content align-items align-content align-self)
flex布局总结一.父元素属性 diaplay:flex; 定义了一个flex容器当我们为父盒子设置了flex布局以后,子元素的float,clear,vertical-align属性将失效. 伸 ...
flex布局详解（配图-简洁易懂）
FlexiableBox即是弹性盒,用来进行弹性布局,一般跟rem(rem伸缩布局(转))连起来用比较方便,flexbox负责处理页面布局,然后rem处理一些flex顾及不到的地方(rem伸缩布局主要 ...
Flex布局教程（来源：阮一峰）
网页布局(layout)是 CSS 的一个重点应用.Flex 布局将成为未来布局的首选方案.本文介绍它的语法,下一篇文章给出常见布局的 Flex 写法.网友 JailBreak 为本文的所有示例制作了 ...
html div flex,CSS中flex布局详解
1.浏览器flex兼容申明 dispaly:flex; display:-webkit-flex; display:-ms-flex; display:-moz-flex; display:-o-fl ...

Flex 布局详解 - 转自阮一峰老师

`1.flex-direction`属性决定主轴的方向（即项目的排列方向）。

2. flex-wrap 属性

3. justify-content属性

4. align-items属性

5. align-content属性

Flex 布局详解 - 转自阮一峰老师相关推荐

最新文章

热门文章

Flex 布局详解 - 转自阮一峰老师

1.flex-direction属性决定主轴的方向（即项目的排列方向）。

2. flex-wrap 属性

3. justify-content属性

4. align-items属性

5. align-content属性

Flex 布局详解 - 转自阮一峰老师相关推荐

最新文章

热门文章

`1.flex-direction`属性决定主轴的方向（即项目的排列方向）。