flex布局怎么用,使用flex布局

flex 布局

一、Flex 布局是什么？

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

任何一个容器都可以指定为 Flex 布局 ? （行内元素也可以）

二、基本概念

采用 Flex 布局的元素，称为Flex 容器 它的所有子元素自动成为容器成员，称为Flex项目

三、容器的属性 （重点记忆）

以下6个属性设置在容器上。

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

flex-direction:row | row-reverse | colume | colume-reverse;

1）row：横向从左到右排列（左对齐），默认的排列方式。

2）row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。

3）column：纵向排列

4）column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

flex-wrap 定义如果一条轴线排不下，如何换行

flex-wrap: nowrap? |? wrap? |? wrap-reverse

1) nowrap (默认)不换行?

2）wrap 换行，第一行排列在上方?

3）wrap-reverse: 换行，第一行在下方

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

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

justify-content : flex-start | flex-end | center | space0-between | space-around

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

align-item: flex-start? |? flex-end? ? |? center? |? baseline |? stretch?

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

Flex布局怎么用？常用的都有哪些属性？

Flex布局意为”弹性部分”，为盒模型提供最大的灵活性。任何一个容器都可以指定为Flex布局（display:flex）；行内元素也可以使用Flex布局（display:inline-Flex）。设为Flex布局以后，子元素的float、clear和vertical-align属性都会失效。

Flex布局：Flex布局

传统布局：

flex布局：

使用范围：

1、如果是PC端页面布局，建议使用传统布局

2、如果是移动端或者不考虑兼容性问题的PC端，建议使用flex弹性布局

flex意为弹性布局，通过给父盒子添加flex属性，来控制子盒子的位置和排列方式，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局

在flex布局中，有主轴和侧轴的概念之分，即所谓的行与列，默认的主轴方向是从左往右，默认的侧轴方向是从上往下。flex-direction属性决定主轴的方向，也就是决定着子元素的排列方向，其中，主轴和侧轴是会变化的，就看flex-direction设置谁作为主轴，子元素就会跟着作为主轴的来排列布局。

设置侧轴排列

justify-content属性定义了项目在主轴上的对齐方式，使用前提必须确定好谁是主轴.

默认情况下，子元素都排在一条线上（主轴），flex-wrap属性定义，flex布局中默认是不换行的。意味着随着子元素不断增加，会直接改变子元素的宽高，不断地挤在一行上。

align-items设置侧轴上的子元素的排列方式(单行的)，这个属性是控制子元素在侧轴(默认是y轴)上的排列方式，在子元素为单个元素的时候去使用。

设置子元素在侧轴上的排列方式，并且只能用于子元素出现在换行的情况中，在单行下是没有任何效果的。

flex-flow属性是flex-direction和flex-wrap属性的复合属性

flex布局中子元素也存在着相对应的一些属性

flex属性定义子元素分配 剩余空间 ，用flex来表示占的多少份，默认为0

针对这个，可以先了解有名的CSS布局 圣杯布局 以及 双飞翼布局 ,大致的效果为两边盒子固定，中间自适应。使用flex布局来做的话，就是去处理剩余空间的份数。

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

order去控制子元素的排列顺序，数值越小的，排列越靠前，默认为0

首先给每个子元素设置一个order值，需要调到前面的，单独提出来将order值设小点即可，想要放到后面order值设大点即可。

【归纳】flex布局

说到flex布局，在我之前的影响中，只知道这是一种较传统布局较方便的布局，这种布局对我来说是全新的。在flex布局出现之前，我们使用的传统布局主要有以下几种：

这些传统的布局方式虽然可以满足我们的很多需求，但是也并不方便，比如实现垂直居中。而现在我们就要开始接触flex布局这种新的布局方式了。flex也可称为“弹性布局”，flex布局有以下几个特点：

接下来就将对flex布局的几个重要知识点进行归纳。

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

如上图所示，该flex容器在纵横有两根轴，其中横向的称为主轴（main axis），纵向的称为侧轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。子元素默认是沿主轴排列的。子元素在主轴方向的宽度叫做main size，在侧轴方向的高度叫做cross size。

flex container（flex容器）有如下六个属性：

该属性主要有以下值：

该属性主要有以下值：

默认值为row nowrap，可以以如下方法设定该属性：

该属性主要有以下值：

该属性主要有以下值：

该属性主要有以下值：

flex item（子元素）有如下六个属性：

该属性默认值为0。

如果所有子元素的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个子元素的flex-grow属性为2，其他子元素都为1，则前者占据的剩余空间将比其他项多一倍。

该属性默认值为1。

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

flex-basis属性定义了在分配多余空间之前，子元素占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即子元素的本来宽度。

默认值为0 1 auto。可以以如下方式设定该属性：

数值越小，排列越靠前，默认为0。

即不使用父元素决定的对齐方式，自身设定一个对齐方式。可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

flex 布局可以简便、完整、响应式地实现各种页面布局。下面就简要地记录几个flex布局的技巧

如果内容被修剪，需要浏览器显示滚动条，以便查看剩余内容，可以使用 over-flow:auto;

实现手机上中下布局：

以上就是我此次关于flex学习的一些记录。可以看出，这次学习是围绕着阮一峰的一篇关于flex的博客展开的，他的博客对我此次学习flex布局以及此次的flex博客编写起到了一定的帮助。除此之外，我在这里推荐两个关于flex学习的小游戏，寓教于乐，十分有趣。

博客原地址：

Flex布局详解（一）

Flex布局的特点：

1、块级布局侧重垂直方向、行内布局侧重水平方向，flex布局是与方向无关的。

2、flex布局可以实现空间自动分配，自动对齐（flexible：弹性、灵活）

3、flex适用于简单的线性布局，更复杂的布局要交给grid布局

图解重点理解1和2里面都是叫flex item，包裹1和2边框叫flex container。其次要注意是主轴方向不一定是横的，也可以是竖的，侧轴也是一样。

（1）、flex-direction常用得属性值有 row 、 row-reverse 、 column 、 column-reverse ,默认情况下属性值是 row 。

HTML

CSS

CSS

（3）、flex-flow其实是flex-direction和flex-wrap两个缩写，其中属性值可以搭配使用。

CSS

CSS