CSS3 弹性布局 flex(给父盒子挂flex帅,让子元素排布练阵)

1.摘自 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能，时至今日 flex已经成为主流布局方式，尤其在移动端小程序等方面表现出色。

1.Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局, 父flex对子内部即块级和行内元素都生效的。2.PS:父盒子设为 Flex 布局以后，内部的子元素的float、clear和vertical-align属性将失效。
因为有justify-content 和 aglin-items 解决了行内文本/img的水平垂直方式3.给父元素设置了 display：flex  则相当于父变为块级display:block。 并且内部子元素的效果看起来是一行的像浮动一样的,但是可以设置flex-direction:column 变回在一列上一行显示的.4.display: flex  是设置在 父元素上面的，但是对子元素生效的,父盒子设置flex之后，他里面的全部子元素，就都会变成 弹性block盒子了5.float浮动 VS display:flex ?  区别是给当前盒子使用float是当前盒子生效去浮动到父级盒子上,而当前盒子使用flex是让内部子元素一行浮动.5.PS:注意好flex盒子有些display/dir/justify/aglin属性只能设置在父盒子上然后对子盒子生效 ,有些grow/shrink/baise/flex属性只能给子盒子上对自己生效,不能混哦6.要千万注意,子盒子的宽度或者高度在没有设置情况下,是不是去借用父盒子的宽度(被儿子p继承)或高度(由子内容撑大),此时给父盒子开flex ,则ju或者ag会出现失效情况,因为子宽或者高都占满了父,哪有空间给你排列了? 7.使用flex排序定位比如flex-center会调整改变position定位元素的起始位置,但是如果加上top和left偏移属性生效后,
则还是一样从定位父级的左上角开始,(即一旦给了top和left一起给则flex排序定位会失效,只给top或者left一边则另一边会保持flex的排序的定位) ,
这适合盒子在超级大定位父级盒子中定位,则可以使用flex先居中定位,然后单独使用top/left去改变另一侧. (俗称flex+absolute配合一起定位,  HTML项目有这个用法去看)      PS:如果没加flex 和flex-center, 直接absolute+left+top箭头是 则定位父级左上角开始定位也是可以的.
PS:但如果盒子的定位父级 必须同时 是去使用flex的结构父级的话,否则不会影响的.还是从定位父级四个角开始(细品)

8.flex 要注意爷爷 > 父亲 > 儿子关系层级的使用,会很乱的.

①比如div蓝色爷爷盒子使用flex 则三个红p爸爸盒子一定挤自己宽度,然后一行显示,因此加column则一列分行去显示
(column一列显示特别注意:主轴justify-content变为垂直方向对齐了不是水平了),分行保证p设置好宽度不被挤,或者p宽度是继承父级div的整行宽度

②然后,三个红p爸爸盒子再次使用flex, 此时是对p内的文本生效的,对,没听错,flex对子内部span/i行内元素也生效,文本水平(justify) 和垂直(aglin)居中对齐都让文本生效了(flex很神奇).

③注意:文字对齐得去每个p的flex设置ju和ag,不能去爷爷div那里,这样是不生效的,越级了.千万注意flex使用范围只能是当前设置flex的元素的子元素.(div蓝盒子只能管p红盒子的水平垂直排列方式, p红盒子才能管内部span盒子的东西 )

④案例1:如下图,给蓝盒子设置flex + column后,然后问蓝盒子的ju和ag是管谁的,
答:1.先清楚:加columnn换方向之后ju管垂直了,而ag管水平了.
2.是管红p盒子的水平和垂直. 但注意:p水平宽度如果继承父蓝盒子的宽度,则水平方向对齐即ag是失效的,都占满宽度了,只能是ju垂直排列是生效的

9. 如何解决红盒子内部两个span文字如果一上一下不对齐 ,(是一行内红色图标字号大了会带着字往下走一点不对齐.)
解决:因此是要在p盒子设置 ag 垂直对齐让文字统一在Y高度上中心,即在p盒子内垂直居中, (千万不能去了蓝爷爷盒子设置,这样只对p多个子红盒子之间垂直排列生效, 不对孙子跨级span文字生效)

PS1: 这两张图的文字ju水平对齐方式,已经设置为两端space-between了,然后再给第二个p即location设置aglin-center就Y上垂直也对齐了了,就不会一上一下了,一上一下是字体图标压宽总高度,本来正常其实是不会一上一下,因为一行的字体肯定都是一样宽高的嘛,就像下面的价格和付款人数那一行一样,正常都Y对齐了不用设置aglin-center的, 有两个span最多设置justify-content而已)

PS2: 其实看完上面你会发现, 所有mask即div下面的所有p宽度在没有设置的情况下,给mask加flex和justify-content是没用的因为p宽度继承了mask的宽度,占满整个mask宽度,因此p怎么可能在mask水平排列呢?
此时这里恰巧是flex-direction:column改变为垂直排列,这样justify-content就是针对垂直方向的,即高度按照内容来的,不会挤满,就可以排列了space-between排列mask垂直方向上的p了.

4.第一个div的flex 的居中,只能管a,让整个a子元素盒子居中在div,但管不了文字和图片在a盒子内(flex下a变盒子)水平居中,因此左右不对齐的. (为什么会水平不对齐,其实和上面一个道理,图片把整个a盒子的内容撑大了,则会默认用子最宽宽度作为父自身宽度,因此a内部还要再来一次水平居中,这里恰巧是column因此,ju是让图文在a垂直方向居中对齐,但是是失效的,因为图文高度这里是和a盒子高度一样的,没有高度给你去排列了,因此这里生效的是ag充当水平方向的居中,类似text-aglin)

因此要给a也加flex,和居中,这样a就能管两个子元素span和i的在a内的垂直和水平对齐方式了 . 一层套一层的居中,达到最终的层层居中(不能像定位一样越可以级移动居中)… *[当然这里可以用text-algin:center]

总结: ①爷爷设置flex ,说明要管父亲盒子的排列方式, 父亲设置flex说明要管儿子文本的排列方式

②子文本在父盒子居中了,然后父盒子又再次在爷爷盒子居中,文本才会最终再爷爷盒子内居中,flex不能跨级

即Flex设置在父盒子,只能管到和影响到子盒子,不能继承到孙子那里去,因此要分关系结构层分别使用flex,两次使用flex,让a蓝色盒子在con-item黄盒子内居中,绿盒子(sapn+i)又在a蓝盒子内居中.

2.Flex基础概念

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

②给父元素设置display:flex,相当于给内部子元素设置了浮动一行显示,但是不会脱标的浮动(不会高度塌陷).

①容器默认存在两根轴：X水平的主轴（main axis）和 Y垂直的交叉轴（cross axis）。
(看到主轴就想X水平方向的排列东西 , 看到交叉轴就想Y垂直方向的排列东西)
②主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；
③交叉轴的开始位置叫做cross start，结束位置叫做cross end。

item子项目默认沿主轴排列。单个项目占据的X主轴空间叫做main size，占据的交叉轴Y空间叫做cross size。

3.容器属性

一共有6种css属性用于调整flex 布局

flex-direction (设置X主轴的排列方向)
flex-wrap
flex-flow
justify-content (设置X主轴的排列方式)
align-items
align-content

3.1flex-direction

flex-direction属性决定主轴的方向（即项目的排列方向）默认横向 row。

.box {flex-direction: row | row-reverse | column | column-reverse;
}row（默认值）：主轴为X水平方向，起点在左端。     [让内部子元素实现一行显示]
row-reverse(X倒序)：主轴为水平方向，起点在右端。 [类似右浮动]column：主轴为Y垂直方向，起点在上沿。            [让内部子元素分行显示,即表现为一列]
column-reverse(Y倒序)：主轴为垂直方向，起点在下沿。 [倒序的正常文档流]前提:column和row设置都是给父然后针对内部子元素的.
通常是父column子row :
通常是父row子column :

3.2flex-wrap

①因为默认情况下，项目会都排在一条线（又称"轴线/行"）上 , 跟boxing-size一样,会挤内容宽度.

②flex-wrap`属性定义，如果一条轴线排不下，如何换行。

.box{flex-wrap: nowrap(默认) | wrap(最多使用) | wrap-reverse;
}

③它的取值属性。

（1）nowrap（默认）：不换行(但会挤内容宽度)。

（2）wrap：换行，第一行在上方(但是会尽量智能放一行上,就放一行上的)。

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

3.3 flex-flow(前面dir和wrap的复合写法,鸡肋)

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

.box {flex-flow: <flex-direction> || <flex-wrap>;
}

3.4 justify-content属性(设置子元素的X轴水平排列方式,单行和多行一样)

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

.box {justify-content: flex-start(默认) | flex-end | center | space-between | space-around | space-evenly;
}

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

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

flex-end：右对齐

center：居中

space-between(用最多)：两端对齐，多余宽度让项目之间变为均分的间隔。

space-around：每个项目两侧的间隔相等。(类似给每个盒子加左右的margin,因此相邻盒子margin会叠加)
所以，使用space-around项目之间的间隔比项目与边框的间隔大一倍。

space-evenly(PS:兼容不好): 彻彻底底让每个间隙距离相等. (不叠加左右外边距)
(兼容处理:用 space-between配合before+after使用)

1.(理解space-around 和`space-evenly的区别!!!)

2.如何兼容处理达到`space-evenly效果: space-between + before/after
在使用该属性的盒子加个前后影分身即可;(前提是:得是单行才能这么使用)

原理:因为space-between是按盒子人头来算间距的,因此很精妙,设置一个没有宽高的前后影分身盒子(记得设置为block,因为影分身默认是行内inline元素)去占位,这样就可以白嫖分间隙给你了,

3.但是注意这不是万能的,如果遇到多行flex-wrap,换行去显示的话,则上面方法错误的会让ul前后 ,只能通过给父容器加padding,类似内部凹陷,让整体扩大,如果不想扩大父盒子的总宽则加box-sizing即可

解决方法:

3.5 align-items属性(设置在单行上子元素Y轴垂直排列方式)

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

PS:但其实这个很鸡肋的,因为父高度一般都不设置的,父高度不设置因此无法用该属性.都是给内部每个盒子加 margin-bottom: 8px; ,让下平均去垂直分配间隙的,这也是flex垂直排列的一个痛处来的,没有具体高度就不能分配的.(而宽度一定可以,宽度一定会给好的)

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

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

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

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

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

center：交叉轴的中点对齐。

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

PS:aglin-item:center和align-content:center 的区别?

align-content 跟上面的 align-items 的区别就是:一个是操作单行的，一个是操作多行的。参数都是一样的设置，除了多了两个 space-betwwen ，space-around

①aglin-item:center

PS:正常的时候去使用align-items单行,是把整个父容器盒子高度看成一整行的,然后在这一整行上垂直居中

②align-content:center (切记 ! 多行时才会生效哦,多行当成整体,就像侧着的 justify-content)

③:如果有多行但使用这个单行aglin-item:center的话,则会变成类似line-height行高 , 即多行拆分成一行一行来各自排列,不是整体,即在每一行的垂直方式,如下图在分为两行即在多行下使用单行垂直居中方式aglin-item,则代表每一行垂直居中了 )

3.6 align-content属性(在设置了wrap多行基础上才有效的,设置在多行上的垂直对齐方式)

1.PS:设置direction-felx:column之后的分行,此时使用align-content的作用不会生效的,必须是wrap强制换行才有效,分行之后还是用aglin-items管各行

2.这个align-content属性一般也都是给内部每个子盒子加 margin-bottom: 具体的px;代替align-content的间隙 ,这也是flex垂直排列的一个痛处来的,没有具体高度就不能分配的.(而宽度一定可以,宽度一定会给好的)**

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

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

该属性可能取6个值。

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

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

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

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

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

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

四、item子元素项目的属性(只能给子元素的)

以下6个属性设置在项目上。

order

flex-grow

flex-shrink

flex-basis

flex

align-self

4.1 order属性

order属性定义项目的排列顺序。数值越小，默认为0。(-1则在最前，0时默认不变, 1在排最后）

.item {order: <integer>;
}

4.2 flex-grow:1属性

一.概念:
1.(flex-grow属性前提都是得有剩余空间,没有剩余间隔空间都不会生效的,因为他就是通过剩余空间来放大子项目自己宽度)
2.flex-grow属性定义,放大项目的比例去霸占剩余空间间隙，默认为0，即如果存在剩余空间，也不放大霸占剩余空间。
3.总结:flex-grow动去分配剩余空间间隙,而默认0就是不动或者让justify-content智能分配间隙.

二.属性值注意细节:
①默认是0时.
[1]要不就都是设置justify-content去按照原比例智能平均分配间隙,而不会去放大项目的宽度霸占剩余宽度,

②而如果全部子元素都设置一样的flex-grow属性值,则每个盒子平均分配剩余空间各各自的宽度中去.

③如果只有一个子元素设置了flex-grow属性值且比0大,则剩余全部空间宽度都是属于该子元素的
(剩余空间间隙没了,被grow霸占了)

④如果有两个以上子元素设置了flex-grow属性值,则才是按照剩余空间开始计算各自空间:
举例:如果一个项目的flex-grow属性为2,一个项目的flex-grow属性为1,其余为0,此时怎么算?
剩余空间/ 3 =分成三份,两份为前者.一份为后者的.

.item {flex-grow: <number>; /* default 0 */
}

4.3 flex-shrink:1属性

概念:
1.flex-shrink属性定义了项目的缩小比例，默认为1 ，即默认如果空间不足，全部子项目将缩小自身内容挤在一行上。

①如果flex-shrink一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，则设置为0不会去缩小,按照原来宽度去缩小权重为1的其它的。

②设置shrink为负值则对该属性全部失效。

.item {flex-shrink: <number>; /* default 1 */
}

4.4 flex-basis属性(意义不大)

①flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
②如果这个属性呢， flex-basis: 100px 你这样设置，他跟 width: 100px的效果是一样的。
但其实把，flex-basis 和 width 两个一起设置，是有用意的。flex-basis 是决定了元素可缩小宽度的最小值， width，是决定了元素宽度可撑开的最大值。

.item {flex-basis: <length> | auto; /* default auto */
}

③它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

4.5 flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item {flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

1.该属性有两个快捷值：auto (1 1 auto) [grow生shrink默]和 none (0 0 auto)[shrink生grow默]。

2.建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

3.案例1:设置flex:1 0 auto;则能伸也能缩, flex:1 1 auto;则能伸平均分配宽度,

此时shrink 0会生效了,盒子相当于设置了min-width最小宽度为50px , 当浏览器一直缩小,缩小到没有间隙去挤内容时,则粉色条也不会再缩小了自身了.而去缩小其他子元素盒子了的.

此时grow 1也会生效了,设置的该盒子会主动霸占了剩余的全部空间间隙.

案例2:父盒子属性设置display:flex ,配合子盒子属性设置flex:1 可以平均分配宽度,适合没有间隙的盒子群使用.
(而下面的白色间隙时边框来代替的)
(PS:注意好flex盒子有些属性只能设置在父盒子上对子盒子生效 ,有些属性只能给子盒子上对自己生效,不能混哦)

PS:flex:1是指平均分配剩余宽度,记住是剩余宽度,如果父盒子又padding,则是去除了padding的位置,再去分剩余宽度的,

4.6 align-self属性(单个项目的垂直对齐方式)

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

.item {align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

多行中父column和子row布局方式总结:(适合在盒子是分行显示,即一列中有相同的盒子,

写法:

①最外层container盒子套 ( header图 + content内容 )

② content 盒子套 (三个con-row行盒子+colum,即先每一行都一个大行盒子写先+colum就会分行显示),

③再每一个con-row行盒子嵌套再三个(con-item小盒子 + row)就会一行显示了,

④此时盒子可以不设置宽度可以+ flex:1 自动平均分配三个小盒子的宽度,因为已经明确一行只有三个盒子,因此可以flex均分)

2(常用).父column子row (和单单只给给con-row子盒子设置row效果是一样的,尴尬,那为什么父也设置flex呢,说明他要管内部儿子的排列方式,但因为flex一设置就会一行显示,因此看情况要不要给column )
给nav-content设置 column ,而con-row设置为row. (nav-content设置 column,让内部con-row子盒子会分行显示,而con-row设置为row,会让其内部的三个链接子盒子,浮动在各自父盒子的行上再去一行显示)

3(常用).父row子column**
给nav-content设置 row ,而con-row设置为column,(和单单给nav-conten盒子父设置row效果是一样的,尴尬,那为什么子也设置flex呢,说明他要管内部行内文字的排列方式,但因为flex一设置就会一行显示,因此看情况要不要给column ,想要文字分行显示就要column,不要就不用也行,不用子column,子row也行的 )
(nav-content设置 row,让内部子元素盒子con-row全部左浮动,如上图四个con-row盒子一行显示了,而con-row设置为column,会让其内部的三个链接盒子,各自保持原文档流即换行显示,自己细品)

1.爷爷nav-content设置flex的column属性,是把其内部几个爸爸con-row元素分一行一行即一列去显示,同时又能够去管爸爸元素的排列方式(注意此时ju是垂直而ag是水平,调转的)

2.爸爸con-row再次设置flex的row属性,是把每行三个con-item子盒子元素可以一行显示,这也是写上flex默认会发生的类似浮动情况.(一行转多行即row转column,则需要设置flex-dir换为column分行显示即可)

3.儿子con-item再次设置flex的row属性,是让内部a可以先整体居中在每一个item中心

4.最后孙子a再次设置flex的column属性,是把a内部文本换行显示,然后让文本(文字+图)在a内居中,
这样文本才是真正在item粉色盒子内居中的

(嵌套设置了四次flex…牛皮)

5.大局观: 前提:container先用来自适应分好总宽即可不用flex,不过让container父级用flex让container居中也是必要的

        ①nav-content  flex+col先分多行的con-row②con-row flex + row再分一行三个con-item③con-item flex + row 让每个item内部a整体居中先④a  lex + column 让每个a内部的文本(字+字 /子+logo)换行,然后都居中在a内. 这样a就彻底居中在粉色item中了

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>携程网,让旅途携手共进</title><link rel="stylesheet" href="css/reset.css"><style>html,body {height: 100%;/* 要用到body的百分比高度之前一定要先继承了 */background: url(img/banner.jpg) no-repeat 0 0/cover;}div {box-sizing: border-box;}.icon {background: url(img/ctrip.png) no-repeat;background-size: 104px;}.icon-hotel {width: 43px;height: 43px;background-position: 0 -127px;}.flex {display:flex}.flex-center {justify-content: center;align-items: center;}.flex-column {flex-direction: column;}.spacing-right {border-right: 1px solid #fff;}.spacing-bottom {border-bottom: 1px solid #fff;}.spacing-bottom2px {border-bottom: 2px solid #fff;}.container {/* 这三步可以让内容随浏览器宽度自适应,即想要宽度自适应,则需要缩最小一个具体min-width,扩最大时一个具体max-width,而盒子自身width宽度则必须要百分比,否则固定死了就不能自适应了 */min-width: 540px;max-width: 1200px;width: 80%;border: 1px solid #ccc;}.container a {color: #fff;font-size: 14px;}.container a:hover {text-decoration: none;}.container:hover {box-shadow: 0 10px 20px rebeccapurple;  /* 自设盒子阴影小玩意 */position: relative;  /* 一上一下即可 */top: -10px;}.header img{width: 100%;  /* 改变img的宽度继承container的整体宽度即可,填满整个container,不能写具体值否则没有自适应浏览器伸缩 */height: auto;  /* 高度可以写auto自适应,或者量307px也行 */}.nav-content {display: flex;flex-direction: column; /* column属性,可以把四个子cont-row分为一行一行显示,此时用column */padding: 4px;  /* 上下左右空白时内边距 */}.con-row {display: flex;flex-direction: row;  /*row属性, 让三个子con-item类似浮动,全部一行显示, */overflow: hidden;  /* 因为子内容.con-item即橘红色是覆盖父盒子宽度的,因此父盒子即这里要隐藏子内容多余的四个角,才会显现出父盒子的圆角出来 */border-radius: 4px; }/*  .con-row .con-classify {width: 30%;  height: 120px;} */.con-row .con-item {height: 120px;background-color: #ff697a;flex:1 ;  /* flex-grow,代表有空隙是每行的3个item盒子,这种适合没有间隙的盒子群,去使用. 写flex:auto也行的平均去抢占剩余空间间隙位置增加自己宽度,或者没有宽度也可以平均分父盒子设置了flex的宽度 */}.item-list a {  /* a下面的文字居中 */display: flex;line-height: 60px;/*这里是让文字看起来上下间隙一致，打到居中效果，可以用变为垂直方   向的ju 的spaces-around*/justify-content: center;align-items: center;}</style></head><body class="flex flex-center">  <!-- 让container居中 --><div class="container"><div class="header"><img src="img/banner.jpg" width="1536" height="307" alt="!"></div><div class="nav-content"><div class="con-row spacing-bottom2px"><div class="con-item flex  flex-center spacing-right">   <!-- 第一行第一个大盒子的链接 --> <!-- 上面flex是为了让子元素a标签整体在父item居中 --><a  class="flex flex-column flex-center " href=""><!-- 上面flex是为了让子元素sapn和i标签子元素整体在父a居中,并且横线排列 --><span>酒店</span><i class="icon icon-hotel "></i>  <!-- 背景精灵图 --></a> </div><div class="con-item  item-list flex flex-column  spacing-right">  <!-- 第一行第二个大盒子的链接 --><a class="spacing-bottom" href="">海外酒店</a> <a href="">特价酒店</a></div><div class="con-item  item-list flex flex-column"> <!-- 第一行第三个大盒子的链接 --><a  class="spacing-bottom" href="">团购</a><a href="">同福客栈</a></div></div>

父盒子flex + 子固定宽度/百分比 = 子盒子就是自适应了
父百分比盒子 +

多行显示 : display:flex + wrap 布局方式2 (适合全部盒子类似强制换行的排下来的,一列中没有共同的东西,

写法:

①最外层container盒子套 (直接套ul>li的 )

②ul 盒子套 (12个li盒子+wrap+必须设置宽度,即可强制换行显示.(不设置宽度则wrap失效的,都不知道一行该有几个,于是全部还是一行显示了)

③最后然后调整父盒子或者子盒子的margin/paddng即可

④此时盒子可以不用 flex:1 自动平均分配四个小盒子的宽度,因为第一已经明确宽度,第二已经有wrap换行,一行会根据计算来只放得下四个个盒子,因此不用flex:1分宽度了)

整体大局观:

前提:container先用来自适应分好总宽即可不用flex,不过用margin :0 auto 让container居中也是可以的,上面是body:flex

        ①ul  flex+ wrap 直接把12个子li盒子可以根据父盒子宽度去换四行显示先

         ②li  这里不用flex  + img + 绝对定位的蒙板mask代替li去flex

③mask +flex + colum 让三个p分行显示, 必须的首先,然后让内部三个p 垂直方向排列,此时是justify-content:space-between

④ p再次设置flex ,让内部文字和垂直和水平方向对齐.(相当于给p设置text-aglin:center)

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的淘宝美食</title><link rel="stylesheet" href="css/reset.css"><style>@font-face {font-family: "iconfont";src: url('fonts/iconfont.eot?t=1593700798211');/* IE9 */src: url('fonts/iconfont.eot?t=1593700798211#iefix') format('embedded-opentype'),url('fonts/iconfont.woff?t=1593700798211') format('woff'),url('fonts/iconfont.ttf?t=1593700798211') format('truetype'),/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url('fonts/iconfont.svg?t=1593700798211#iconfont') format('svg');/* iOS 4.1- */}i {font-style: normal; /* i斜体清除默认样式 */}.icon-font {font-family: 'iconfont' !important;font-size: 22px;vertical-align: middle;padding: 2px;}.icon-xe605 {color: red;}.icon-xe665 {color: red;}.flex {display: flex;}.flex-column {flex-direction: column;}.flex-center {justify-content: center;align-items: center;}.flex-between {justify-content: space-between;}.container {box-sizing: border-box;min-width: 680px;max-width: 1200px;width: 80%;padding: 8px 8px 0;/* 给父容器加上 左右 内边距 即可让内部整体凹陷进去感觉,等于ul在container居中了. (如果子盒子有边框就不适合给其加padding了,让父盒子加更好点,只是增大宽度,或者用怪异盒子也行) */margin: 0 auto;border: 1px solid #ccc;}.container ul {display: flex;flex-wrap: wrap;justify-content: space-between; /* 每个子盒子li去两端对齐,中间平均分配 */}.container ul li {position: relative;display: flex;box-sizing: border-box;min-width: 180px;max-width: 280px;width: calc(25% - 8px); /* 高度不用设置让img撑开即可 */ /* 每个盒子分为四份各25%,但是会四个会挤完,因此每个盒子各留8px,就32px间距给其justify-content去分剩余空间间隙,32,三个间隙平均各11 *//* 这里直接写with:22% ;也行的,四个盒子88%,剩余12%给系统自动用justify-content去间隙也行.只是一个具体一个简便. */margin-bottom: 8px;border-radius: 3px;box-shadow: 0 0 2px #ccc;}.container li img {width: 100%;height: auto;}.container li .mask {/* display: none;  */     /* 这种蒙板是直接display显示,但是可能会和diplay:flex冲突 */position: absolute;box-sizing: border-box; /* 不会挤出去 */justify-content: space-evenly;  /* 因为是垂直排列,因此水平是针对上下的. */padding: 8px;width: 100%;height: 100%;background-color: rgba(75, 74, 74, 0.6); /* 透明度让绝对定位的底部图片可以显示出来 */transform: scale(0);        /*这一步,让mask不会显示,等于display:none 这种蒙板是中心放大扩散到四周 */}.container .mask .location {align-items: center;}.container .mask p {text-align: justify;font-size: 14px;color: #fff;}.container li:hover .mask {/*  display: block; */transform: scale(1);transition: .5s;}</style>
</head><body><div class="container"><ul class="flex"><li><img src="img/taobao/food4.webp" width="230" height="230" alt="!"><div class="mask flex flex-column "><p class="des"><i class="icon-font icon-xe605">&#xe605;</i> 【N上新口味】稻香村绿豆冰糕桂花味网红零食抹茶</p><p class="location flex flex-between"><span class="loc-store"><i class="icon-font icon-xe665">&#xe665;</i>天猫超市</span><span class="loc-city">北京</span></p><p class="purchase flex flex-between"><span class="pur-price">¥39.90</span><span class="pur-count">69人付款</span></p>

大总结:

1.① (第一个携程案例)如果是通过colum分行,让一行中明确可以固定放了几个盒子的时候, 可以让固定的几个盒子不设置宽度,然后让flex:1充当盒子宽度,让盒子宽度被flex:1 平均分配.(比如上面第一个案例,每一个行盒子中固定只有三个盒子了)

(这种适合没有间隙的盒子群)
以下图中：con-row设置了flex的,全部item盒子可以自适应的

②(第二个淘宝案例)如果是通过wrap强制换行,让一行中放完全部盒子,只是wrap强制换行那种, 则不适合使用flex平均分宽度, 只能手写具体宽度,让wrap来强制换行这样.

③或者子盒子写百分比自适应也行的.(适合有间隙的盒子群)
以下图中：ul设置了flex的,全部li盒子可以自适应的

2. min和max-width宽度就是专门用来搭配+限制百分比宽度的, 让用户最小缩到和最大扩到哪不会去自适应了,保证能自适应情况下,(缩到最小)结构也不变形,提高用户体验. 步骤如下:

(1) 都是从max-width着手,因为我们不知道用户缩到多小,但我们能管到最大的范围.即拿到PSD宽度就是设置为max-width,
1200px/1080px
(2)真正width宽度则设置为百分比,看看大致占了父盒子的百分之多少(也可以计算max-width / 父盒子宽度 )
百分比%
(3) min-width 可以最后慢慢调的, (自己缩小看看,结构坍塌变形的分界点在多少,就可以设置为min-width)
680px/540px
(4) 切记:父和子盒子的宽度百分比例,也要匹配的,看下图如何匹配的.

3.container(因为包含header,banner,content等)都是用来宽度自适应的,不用加flex先的.(下一级开始加)
(即如果container包含许多板块则不加flex,如果直接内部开始盒子排列则可以直接加flex,然后此时给container的父盒子加display:flex,container就能自适应了)

4.在wrap换行模式中, aglin-content 多行的垂直排列方式中,如果父高度没有设置(一般也不会分配),则无法分配,一般都是用子盒子的margin-bottom代替分配的…

5.space-between 如果无法用前后伪元素兼容达到 sapce-evenly的效果,则一般给父容器整体加padding,这样就
父space-between + padding两端也分配间隙 = sapce-evenly的效果了

在这里插入图片描述

3.练手自己研发小案例:

其实不要全部用flex,像内部文字,我还是建议用text-aglin + line-height / padding+margin写

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>低洼大</title><style>* {margin: 0;padding: 0;}html,body {height: 100%;}.container {min-width: 100px;max-width: 290px;width: 30%;display: flex;flex-direction: column;border: 1px solid red;margin: 50px auto;padding: 0 8px;}.container:hover {position: relative;top: -5px;box-shadow: 0 5px 10px silver;}.title {display: flex;flex-direction: row;justify-content: space-between;}ul {box-sizing: border-box;list-style: none;display: flex;flex-wrap: wrap;justify-content: space-between;}.box {display: flex;flex-direction: column;justify-content: space-between; /* 这四步用 text-align: center;+ line-height 直接这个也行的*/align-items: center;margin-bottom: 10px;width:calc(25% - 9px);height: 120px;border: 1px solid black;}span {font-size: 12px;}</style>
</head><body><div class="container"><div class="title"><span>著名主持人</span> <span>展开</span></div><div class="content"><ul><li class="box"><span>周涛</span><span>著名达瓦达瓦的</span><span>央视</span></li><li class="box"></li><li class="box"></li><li class="box"></li><li class="box"></li><li class="box"></li><li class="box"></li><li class="box"></li></ul> </div></div>
</body>
</html>

自学前端第二十六天:flex弹性盒子相关推荐

自学Python第二十六天- Tornado 框架
自学Python第二十六天- Tornado 框架安装及基础引用创建.配置.初始化应用及简单运行服务创建应用对 app 进行设置另一种设置方法一些其他的配置关于调试模式设置路由处理器 ...
自学前端第二十九天 CSS高级之细节技巧
第二十九天 css高级细节技巧一.background-color :属性设置元素的背景颜色. 定义和用法 background-color 属性设置元素的背景颜色. 元素背景的范围 backgro ...
自学前端第二十五:web字体图标使用
web字体图标:本质是字体,伪元素联用的出现一个白色框即字体失效的检查: ①路径那里是不是fonts文件夹的第一子路径就是全部的文件. ②/+unicode编码和转义编码有没有弄棍 (一个给c ...
自学前端第二十四天:Animation动画栈帧效果
CSS3 帧动画 amimation @keyframes amimation 是transition过渡的高级升级版 1.为什么要 amimation 一帧一帧的具体动画,因为transition进 ...
自学前端第十天 : CSS怪异盒子模型
一.怪异盒子模型怪异盒模型是IE盒子模型我们可以通过 css 样式 box-sizing来进行切换 select {box-sizing: border-box; /* 怪异盒子模型 */box- ...
Flex弹性盒子详解：从量变到质变的理解
Flex弹性盒子在前端css3中有个非常重要的属性,就是弹性盒子了,他在页面布局中起到的作用可谓是有着王霸之业,那么我们如何正确的使用flex布局呢?让我来介绍一下吧.我们可以将整个flex布局分成 ...
flex html 页面移动,HTML页面布局之flex弹性盒子
这里是修真院前端小课堂,本篇分析的主题是 [HTML页面布局之flex弹性盒子] 每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方 ...
flex弹性盒子中flex-grow与flex的区别
flex弹性盒子中flex-grow与flex的区别大家在使用flex布局的时候很多情况下都会用到flex-grow这个属性, flex-grow 属性用于设置父元素剩余空间的瓜分比例, flex ...
HTML+CSS_第三部分(Flex弹性盒子布局、grid网格布局、移动端、移动端流式布局、移动端rem布局、响应式布局、Bootstrap框架)
文章目录 (1)Flex弹性盒子布局一: 父容器上的属性 1. display:flex 设置为弹性盒子(写在父容器上) 2.flex-direction值设置子项的布局方向(写在父容器上) 3. ...

自学前端第二十六天:flex弹性盒子