flex布局换行有问题,flex换行后均匀分布

flex布局

1 .1维布局，一个flex一次只能处理一个维度上的元素布局，一行或者一列。

2 .如果不规定换行，就算是超了，会等比压缩缩小，而不是自动换行，想要换行必须要使用felx-wrap

3 .任何一个容器都可以被指定为flex布局

4 .行内元素可以被指定为inline-flex

5 .设置flex之后，子元素的float,clear，vertical-align

1 .在flex布局中，一个Flex子项的宽度是由元素自身尺寸即flex-basic设置的基础属性，以及外部填充flex-grow,收缩flex-shrink，还有最大，最小尺寸限制这5个共同决定的

2 .基础尺寸：flex-basic,box-sizing盒模型共同决定

3 .弹性增长;flex-grow属性，弹性收缩；flex-shirk属性

4 .最小尺寸min-wdith,max-width等css属性，min-content最小内容尺寸,width也属于最小尺寸了

5 .在flex布局中，子项设置width是没有直接效果的.实际设置的width，虽然看起来生效了，但是效果是flex-basic的作用

6 .flex-basic的默认值是auto，也就是完全根据子列表项自身尺寸渲染(min-width||max-widthwidthcontent-size)

7 .是盒模型，元素自身尺寸特性，以及flex属性共同作用的结果。

最大最小尺寸限制弹性收缩，弹性扩张基础尺寸

1 .所以无论是什么布局min-width,max-width这种属性都拥有绝对权威

1 .如果是数值，比如flex:1。chrome里面是flex-basis:0%,flex-grow:1,flex-shirk:1.

2 .如果是长度值，比如flex:100px。还是chrome，flex-basis:100px,flex-grow:1,flex-shirk:1。

1 .2个参数，3个参数，以及initial,auto,none这些关键字，没有记的必要，直接分开写的清清楚楚不就好了，非要用一些自己不是很明白的参数在那里瞎搞

2 .flex默认值 0 1 auto 。也就是不放大，等比缩小，用原来的大小

1 .分配固定的家产数量

2 .如果同时设置width，会被忽略，但是max-width，min-width，优先级比flex-basis更高。但是最高不要用这个值，也就是使用宽度直接使用flex-basis就可以，不需要单独给子项固定width，这样会让人很疑惑。甚至根本不需要min-width/max-width这些属性

3 .flex-basic是作用在content-box上的.设置的width+padding+border

。如果给他设置box-sizing:border-box:那么宽度会减小，减小的长度是padding-left+padding-right+border*2的长度

4 .flex-basis:支持一堆关键字，但是好多都不支持

1 .家产任然后赋予的时候在怎么分。默认是0.多余空间不分配

1 .家产剩余不够分的时候怎么分。默认是1，空间不足会分配

1 .每一个item固定大小100px。只有flex-basis：100，其余两属性没有，但是宽度不足，又没有换行的时候，宽度不够，所有都是会一起缩小的，并不是最小宽度，这是因为flex-shirk:默认是1.所以属性一定还是设置的

2 .每一个item最小宽度是100，多余宽度等扩大，但是要有间距.因为会等比扩大，所以间距要自己设置，这里可以设置padding。还有一个重要的就是background-color的计算和bos-sizing没有关系。所以这里加padding没啥用，背景颜色还是在原来的范围内显示，只是content-box会变化。所以这里要加margin,但是marginzhe这里也有一个坑点，flex布局下不会自动margin折叠，所以不能简单的margin：10，这样各个item的间距不一样

1 .flex-direction:决定主轴的方向

从左到右非别是

2 .flex-wrap:默认情况下，所有项目都是排在一条线上，就算是超了，默认情况下都是按照1:1缩小，而不是机灵的自动换行，必须使用这个属性才会自动换

3 .flex-flow:上面那俩属性的合并值。

4 .justify-content:主轴上项目的对齐方式。如果是横向主轴，那么是左右的对齐方式，如果是竖向主轴，那么就是上下的对齐方式

5 .align-items:交叉轴上的对齐方式，也就是上下对齐方式.具体的对齐方式和交叉轴有关系

6 .align-content属性：多跟轴线的对齐方式,如果项目只有一根轴线，这个属性

不起作用

1 .order：本来列表是按照实际的渲染顺序来显示的，如果单独给某个属性设置这个值，数字越小，排列越靠前。

2 .flex-grow

3 .flex-shrink

4 .flex-basis

5 align-self:重点。覆盖align-items属性，允许单个项目和其他有不一样的对齐方式.会覆盖align-items属性。

css基础之flex布局

很多时候跟着书和不系统的视频学习，会发现没有方向，学了很多却不知道自己能够做出什么成绩。

学习要有一个清晰的职业学习规划，学习过程中会遇到很多问题，你可以到我们的web学习交流君羊- 点击此处 ，

同时准备了基础，进阶学习资料。学友都会在里面交流，分享一些学习的方法和需要注意的小细节，每天也会准时讲一些项目实战案例。

————————————————

1.什么是flex

flex 是 Flexible Box 的缩写,意为 弹性布局

flex布局中把一个元素作为容器，容器中的子元素称为项目

可以通过容器的flex属性，设置所有项目的排列样式。也可以通过项目的flex属性，设置指定项目的排列样式。

2.flex布局的方向

flex布局项目的排列方向可以有两个维度，一水平，二垂直

项目排列方向称为主轴，与主轴垂直的方向叫交叉轴

在每个轴上有两个方向，从左至右，从右到左；从上到下，从下到上。

2.1 flex水平布局

在水平维度，默认方向是从左至右

可以通过?flex-direction：row-reverse设置为从右到左排列

效果图：

1).默认方向,从左至右

2).反方向

2.2 垂直布局

效果图：

1).默认方向，从上到下

2).反方向

3. 容器内项目换行

通过flex-wrap属性，设置项目在容器内是否可以换行，默认不允许换行。

不换行的称为单行容器，换行的称为多行容器

也可以通过flex-flow属性同时设置容器主轴方向和是否换行（推荐使用）

效果图：

1).默认不允许换行，项目被压缩

2).允许换行，当剩余宽度不足容纳一个项目块时，就换行

相关知识：

css如何实现边框长度控制功能

详细介绍css中的数学表达式calc()

关于书籍：需要学习资料的小伙伴们可以加群， 点击此处

flex弹性布局彻底掌握

flex布局又称为弹性布局，相对于更早出来的float浮动布局更加方便，在兼容性方面还有不足，但随着很多浏览器版本的淘汰，今后的flex布局会被更加广泛使用。在掌握flex布局前先认识两个概念。

1.flex container

2.flex items

如图所示：

flex布局包含两个重要的轴，main axis和cross axis，各自起点、终点分别对应strat和end。了解到flex布局的基本原型后，我们来看看其属性，属性又分为flex container的属性和flex items的属性，如下图：

默认情况下flex的排列方向为main start到main end，当切换到其他属性时：

flex-direction：row-reverse

flex-direction：column-reverse

1.2justify-content属性

justify-content属性表示flex items在main axis上的对齐方式，其值有center、flex-start、flex-end、space-between、space-around。

justify-content：center

justify-content：flex-end

justify-content：space-between

是每个items间隔相等

justify-content：space-around

items间的间隔是边缘间隔的两倍

1.3align-items

align-items属性决定了items在cross axis的对齐方式，属性值有stretch、flex-start、flex-end、center、baseline

stretch属性值为align-items的默认属性：当items在cross axis方向的size为auto时，会将其自动拉伸填充整个flex container，如：

align-items：flex-start

items与cross start对齐

1.4flex-wrap

flex-wrap属性是控制items换行的，其属性值有：nowwrap、wrap、wrap-reverse

flex-wrap：nowwrap默认值不换行，每个items会自动调整宽度填充完整个flex container

1.6align-content

align-content：flex-start（这就解决了上述中换行没有紧挨的问题）

align-content：flex-end

align-content：center

align-content：space-between（两端cross start 与cross end对齐）

align-content：space-around（与justify-content一样）

align-content：space-evenly

二、flex items上的css属性

2.1order

order属性决定items之间的排列的先后顺序，如图将原本排列的模块倒序排列如下所示，可知order越小排在越前。

2.3flex-grow

flex-grow属性用来对items的宽度进行放大，默认值为0，这里3个items的初始宽度为100px，离flex container边缘还有200px，当将3个items的flex-grow设置为1时，则每个items的宽度增加200px的三分之一，如：

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值设大点即可。

CSS flex布局

flex布局是一种无论对于块级元素还是行内元素都可以被采用的布局，且它使用起来也是十分的方便

首先是要指定flex布局

当我们指定flex布局方式的时候，其属性值 float、clear、vertical-align就失效了

无论是块级元素还是行内元素，当他们指定使用flex布局的时候，就被称为“ 容器 ”（flex container）

他们的子元素自动成为容器成员，被称为“ 项目 ”（flex item）。

flex布局是通过两根轴决定的，其实现方式其实和直角坐标系很像，都是通过轴来进行定位

每个容器都有两根轴，分别为水平的 主轴 （main axis）和垂直的 交叉轴 （cross axis）。主轴开始位置为main start，结束位置为main end。交叉轴的开始位置为cross start，结束位置为cross end

容器内的项目都是沿着主轴排列的，这点和块级元素有较大的不同，因为每个块级元素默认是占有一整行的，且排列方式为由上到下排列。

每个项目都占有一定的主轴空间和交叉轴空间，分别被称为main size和cross size

flex布局下，容器和项目都有其各自的属性

决定主轴的方向，即决定项目的排列方向，其属性值有

决定了当一行放不下所有的项目时，其换行与否以及换行方式

定义了项目在主轴上的对齐方式，假设主轴是从左向右的水平排列

定义了项目在交叉轴上的对齐方式，假设交叉轴是从上到下排列

在这里重点说一下上面这两个属性。

这样可以很方便的设置水平垂直居中

另外说一下align-items：baseline这个属性值。如描述，这个属性值是通过文字来进行对齐，而不是每个项目的边界或是中心

在容器内具有多根主轴线时，可以定义这些轴线的对齐方式

align-content属性和justify-content属性，这两者的属性值有较大的相似之处，这是因为，justify-content属性定义的是多个项目在主轴上的对齐方式，而align-content属性定义的是多根主轴在交叉轴上的对齐方式，这两者描述的对象就几乎一致

定义了多个项目的排列顺序，其使用方式和z-index属性值有异曲同工之处，都是指定属性值，属性值为整数。对于order属性，属性值越小，则排列越靠前；对于z-index属性，则属性值越小，就越在底层

设置了项目的放大比例，其默认值为1。

设置了项目的缩小比例，默认值为1。

在分配多余空间之前，为项目定义其占据的主轴空间

用来设置单个项目与其他项目不同的对齐方式，其属性值和align-items的属性的属性值基本一致，不过其默认值为auto，表示继承父元素的属性值。

flex布局下，white-space遇到的坑

flex布局下，white-space无效，而且会导致一些乱七八糟的问题，在它的父元素中加入min-width:0 解决问题

div

????span 超出边框测试内容超出边框测试内容超出边框测试内容超出边框测试内容/span

????span 超出边框测试内容超出边框测试内容超出边框测试内容超出边框测试内容/span

/div

style

div{

????display:flex;

? ? min-width:0;//这里必须要，不然下列span设置无效

? ? span{

? ?????????overflow:hidden;//超过指定的宽度和高度也隐藏 同时也隐藏子元素

????????????display: inline-block;//块级元素显示在这一行，不换行，其他块级元素也可以显示在这一行

????????????white-space: nowrap; 所有的文本都显示在这一行

????????????text-overflow: ellipsis; 多余的文本用省略号显示

? ? ? ? ? ? width:100%;

????}

}