2024年9月css弹性布局属性（CSS弹性布局缺点）
⑴css弹性布局属性（CSS弹性布局缺点
⑵具体的弹性容器属性列表:
⑶*flex-direction:弹性容器中子元素的排列方式(主轴排列方式)*flex-wrap:设置弹性盒子的子元素超出父容器时是否换行*flex-flow:flex-direction和flex-wrap的简写*align-item:设置弹性盒子元素在侧轴（纵轴方向上的对齐方式*align-content:修改flex-wrap属性的行为，类似align-items,但不是设置子元素对齐，而是设置行对齐(行与行的对其方式)*justify-content:设置弹性盒子元素在主轴（横轴方向上的对齐方式
⑷格局自己的需要来选择布局，非常好，具体案例下面链接有
⑸我们知道，标准流中的，父容器里的多个块级的子元素会默认从上往下排列。但我们如果使用伸缩布局，就可以使子元素们在不脱离标准流的情况下，水平方向上，从左至右排列flex布局的优势、flex布局的子元素不会脱离文档流，很好地遵从了“流的特性”。、flex是一种现代的布局方式，是WC第一次提供真正用于布局的CSS规范。flex非常提供了丰富的属性，非常灵活，让布局的实现更佳多样化，且方便易用。但flex的缺点在于，它不支持低版本的IE浏览器。我们来明确几个概念弹性盒子弹性盒子指的是使用display:flex或display:inline-flex声明的父容器。子元素/弹性元素子元素/弹性元素指的是父容器里面的子元素们（父元素是弹性盒子。
⑹使用display:flex或display:inline-flex声明一个父容器为弹性盒子。此时，这个父容器里的子元素们，会遵循弹性布局。我们一般使用display:flex。.flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配min-width最小值min-width:px最小宽度不能小于max-width:px最大宽度不能大于
⑺flex-direction：用于设置盒子中子元素的排列方向。属性值可以是：
⑻flex-direction这个属性默认子元素从左到右排列的。
⑼子盒子如何在父盒子里面水平对齐方式如下所示，
⑽子盒子如何在父盒子里面垂直对齐（单行，如下所示
⑾flex-wrap控制是否换行，如下
⑿flex-flow是flex-direction、flex-wrap的简写形式
⒀align-content是针对flex容器里面多轴(多行)的情况,align-items是针对一行的情况进行排列。必须对父元素设置自由盒属性display:flex;，并且设置排列方式为横向排列flex-direction:row;并且设置换行，flex-wrap:wrap;这样这个属性的设置才会起作用。
⒁css笔记盒模型,flex弹性布局,三列布局
⒂咦,感觉这个层次示意图,比较值钱!单独放一下.触发怪异模式的条件如果想设置滚动条样式怎么办?三列布局第一种绝对定位htmlcss利用vw和calc()?float方式,要注意html的顺序htmlscss参考三列布局实现种方法;双侧翼,还真是学习了.这样能够保证先加载中间的主要内容htmlscss不用float用display:inline-block行不行?这才发现float和inline-block有个挺大的区别float时,left通过margin-left向左移动时,right会被mid卡主.inline-block时,left通过margin-left向左移动时,right会跟着left一起移动.双侧翼很巧妙!css每个单句都不怎么难,但复合使用不太好掌握.圣杯模式htmlscss这个就更巧妙了,我真实佩服的五体投地.首先,width和margin的百分比都是针对父级的宽度,这个宽度是content-width不包括padding部分.所以根据padding预留出左右的空间.根据float的特性,左右会折行到下一行,通过margin-left可以让float元素之间重叠,让他们回到同一行.但重要的是,left的移动,right不会跟着移动,这和inline-block不同.最后用relative最后再调一次位置.实在是精妙.css关于position感觉非常坑人关于百分比的基准值,这里有写.用flexhtmlscss确实很方便,问题来了,如果我想让mid先加载怎么办?利用orderhtmlscss设置在子元素,伸缩项目上.多余的部分会进行拉伸填充,每个子元素的默认是为,默认是不会拉伸填充,不变形.如果设置,则按照比例,分割空间分配.也就是会经过变形不超出父级.默认值为,按照该比例,切割子元素,如果我们想让他们不变形且不换行,可以把子元素的shrink值都设置为这就是视频和文字的差异了,因为用文字表达要准确,所以只能说的不是人话,实际上核心逻辑非常简单.刚开始,我不明白这个属性有什么用处,后来发现三列布局时,通过html顺序和order配合可以调整加载顺序.默认值为如果我们想设置子元素的主轴方向的属性,可以用grow,shrink,base,order,可以调整主轴的大小和位置如果想谁知子元素的侧轴方向的属性,可以用aline-item,父元素上的flex-directionflex-wrapjustify-contentaline-itemaline-content这几个属性,都是用来进行布局的.非常的,,嗯强大.我们讲主轴设为x轴,设定多行的情况,讨论一下aline-item和aline-content的效果区别.之前我只是笼统的知道aline-item作用在侧轴只有一行的情况.aline-content作用在侧轴多行的情况.而实际上aline-item对侧轴多行的情况也是有效果的,只是不一样.html当值为strech时,两个效果是一样的.注意strech如果想要有效果,就必须让heigth(侧轴宽度)不是固定宽度,否则失效.除了这三个之外,aline-content还有两个属性,与justify-content非常类似,如果父级relative子级当中有absolute的元素,则该子元素不受到flex布局的影响.flex布局时会排除该元素进行布局至此,我觉得flex进行布局,那是真的强.主轴和侧轴的各自控制属性基本就全了.侧轴唯一比主轴差的属性,应该就是shink和order属性了.好课外思考就到这里,继续看视频
⒃CSS：弹性布局里的align-items和align-self简单记录
⒄用于弹性容器里，即“box“，该容器内的所有元素都一致受制于align-items的值。
⒅用于弹性容器内部的元素，即“box“、“box“，align-self可以分别控制不同的元素取不同的值。
⒆css弹性布局是什么
⒇弹性盒模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。这与XUL（火狐使用的用户交互语言相似，其它语言也使用相同的盒模型，如XAML、GladeXML。使用该模型，可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。例子使用以下的HTML代码：传统的盒模型基于HTML流在垂直方向上排列盒子。使用弹性盒模型可以规定特定的顺序，也可以反转之。要开启弹性盒模型，只需设置拥有子盒子的盒子的display的属性值为box（或inline-box即可。displaybox水平或垂直分布“box-orient”定义分布的坐标轴：vertical和horizional。这两个值定义盒子如何显示body{displayboxbox-orienthorizontal}反向分布“box-direction”可以设置盒子出现的顺序。默认情况下，只需定义分布坐标轴——box随html流分布。如果为水平坐标轴，则从左到右分布；垂直坐标轴则从上到下分布。定义“box-direction”的属性值为“reverse”，则反转盒子的排列顺序。body{displayboxbox-orientverticalbox-directionreverse}具体分布属性“box-ordinal-group”定义盒子分布的顺序。可以随意的控制其分布顺序。这些组以一个从“”开始的数字定义，盒模型将首先分布这些组，所有这些盒子将在每个组中。分布将从小到大排列。body{displayboxbox-orientverticalbox-directionreverse}#box{box-ordinal-group}#box{box-ordinal-group}#box{box-ordinal-group}盒子尺寸默认情况下，盒子并不具有弹性，如果box-flex的属性值至少为时，则变得富有弹性。如果盒子不具有弹性，它将尽可能的宽使其内容可见，且没有任何溢出，其大小由“width”和“height”来决定（或min-height、min-width、max-width、max-height。如果盒子是弹性的，其大小将按下面的方式计算：具体的大小声明（width、height、min-width、min-height、max-width、max-height；父盒子的大小和所有余下的可利用的内部空间如果盒子没有任何大小声明，那么其大小将完全取决于父box的大小。即：盒子的大小等于父级盒子的大小乘以其box-flex在所有子盒子box-flex总和中的百分比（子盒子的大小=父盒子的大小*子盒子的box-flex/所有子盒子的box-flex值的和。如果一个或更多的盒子有一个具体的大小声明，那么其大小将计算其中，余下的弹性盒子将按照上面的原则分享剩下的可利用空间。看看下面的例子，理解起来更容易。所有盒子都是弹性的下面的例子中，box的大小为box的两倍，box与box大小一样。看起来好像是用百分比定义盒子的大小，但是有一个区别：使用弹性盒模型，增加一个盒子，无须重新计算其大小。body{displayboxbox-orienthorizontal}#box{box-flex}#box{box-flex}#box{box-flex}一些盒子有固定大小下面的例子中，box并不是弹性的，宽度为px；这样box和box将有px的可利用空间。因此，box的宽度为px(*/)，box的宽度为px(*/)。body{displayboxbox-orienthorizontalwidthpx}#box{box-flex}#box{box-flex}#box{widthpx}溢出管理因为是弹性盒子、非弹性盒子混排，有可能所有盒子的尺寸大于或小于父盒子的尺寸。这样就有可能空间太多或空间不足。空间太多如何处理可利用空间的分布取决于两个属性值：box-align和box-pack。属性“box-pack”管理水平方向上的空间分布，有以下四个可能属性：start、end、justify、orcenter。start所有盒子在父盒子的左侧，余下的空间在右侧；end所有盒子在父盒子的右侧，余下的空间在左侧；justify余下的空间在盒子间平均分配；center可利用的空间在父盒子的两侧平均分配。属性“box-align”管理垂直方向上的空间分布，有以下五个可能属性之：start、end、center、baseline和stretch。start每个盒子沿父盒子的上边缘排列，余下的空间位于底部；end每个盒子沿父盒子的下边缘排列，余下的空间位于顶部；center可用空间平均分配，上面一半，下面一半；baseline所有盒子沿着它们的基线排列，余下的空间可前可后；stretch每个盒子的高度调整到适合父盒子的高度body{displayboxbox-orienthorizontalwidthpx}#box{box-flex}#box{box-flex}#box{widthpx}空间不足怎么办与传统的盒模型一样，overflow属性用来决定其显示方式。为了避免溢出，你可以设置box-lines为multiple使其换行显示。弹性盒模型看起来很不错，Gecko和WebKit对该模型都有一些尝试性的测试。在这些属性之前加上-moz和-webkit即可使用该属性。也即是说，firefox、safari、chrome可以使用这些特性，可以看看这个弹性盒模型的demo。
⒈CSS-flex弹性布局之flex属性
⒉flex大致分为两类属性：容器属性和项目属性（容器内部项目的属性。flex属性（flex：如就给容器内部项目设置的属性。这里的wrap指容器，item我们称作项目。我们还需要知道flex属性是flex-grow,flex-shrink和flex-basis的简写，默认值为auto。后两个属性可选。接下来我们逐一介绍这三个属性:flexgrow属性设置flex容器中的**可用空间**应分配给该项的大小。如果所有同级项目都具有相同的值，则所有项目将获得相同的可用空间份额，否则将根据定义的不同比率进行分配。从左到右三个红色方块的宽度依次为.++.=，加上个边框刚好。三个item按照::的比例占满了容器。上面我们并没有给item添加宽度，如果我们给它们加上width会怎么计算呢？我们通过控制台查看三个item的宽度从左到右依次是++=，加上个边框刚好。但是三个元素并不是按照::的比例分配的。这是为什么呢？仔细看定义后知道，我们给wrap设置了width为px，三个item设置了px，所以剩余的是px。剩余的px按照::的比例又分别分配给了三个width为px的item。注意这个比例是剩余空间分配的分配比例，而不是分配后元素自身的比例。设置项目的收缩比例，如果空间不足，该项目将缩小。默认值为。设置或检索弹性盒伸缩基准值。如果所有子元素的基准值之和大于剩余空间，则会根据每项设置的基准值，按比率伸缩剩余空间。flex属性是flex-grow,flex-shrink和flex-basis的简写。
⒊CSS弹性盒模型的布局理解
⒋什么是flex布局？传统的布局方案是基于盒模型，依赖于display:block和float+position，但是对于一些特殊的布局来说就不是很方便，如在盒模型中垂直居中。年WC提出一种新的布局方案，flex弹性盒布局，目前兼容的浏览器有chromeoperaIEFirefoxSifari?flex兼容浏览器版本但是在未来flex布局将会成为布局的首选方案。flex是flexinleBOX的缩写。意思是弹性布局，用来为盒模型提供最大的灵活性。??任何一个容器（标签都可以指定为flex布局。用display:flex；如果给容器设置flex的时候当前容器内子元素的float,clear,vericla-align都将会失效flex的基本概念容器默认存在两根轴：水平的主轴（mainaxis和垂直交叉轴（crossaxis.主轴的开始位置（与边框的交叉点叫做mainstart,结束位置叫做mainend;交叉轴的开始位置叫做crossstart,结束位置叫做crossend.项目默认沿主轴排列。单个项目占据的主轴空间叫做mainsize,占据的交叉轴叫做crosssize.如果给一个元素设置为flex后，这个元素就会作为子元素的flex容器。通过给容器设置属性来改变里面子元素的位置。二首先要给父元素添加display:flex；将父元素转化为弹性盒.用flex-direction来改变盒子里元素的位置row默认在一行内排列（从左向右row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。column：纵向排列。column-reverse：反转纵向排列，从下往上排，最后一项排在最上面.内容对齐（justify-content属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（mainaxis对齐justify-content：flex-start默认，左对齐（图justify-content:flex-end右对齐（图justify-content:center居中对齐（图justify-content:space-between两端对齐，中间自动分配justify-content:space-around自动分配距离主轴对齐方式.align-items（交叉轴对齐方式flex-start：顶端对齐flex-end：底对齐center：垂直居中对齐baseline：项目内文本的底线对齐stretch?默认值??项目的高度自适应容器（注：子元素不能设置高交叉轴对齐方式.flex-wrap该属性控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。?nowrap：flex容器为单行。该情况下flex子项可能会溢出容器?wrap：flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行?wrap-reverse：反转wrap排列。图（nowrap注意如果父元素盒设置宽度会自动缩子元素容器宽度图（wrap图（warp-reverse容器单行或者多行方式?、align-content（行与行之间对齐方式当伸缩容器的侧轴还有多余空间时，本属性可以用来调整「伸缩行」在伸缩容器里的对齐方式，这与调整伸缩项目在主轴上对齐方式的《‘?justify-content’》属性类似。注：本属性在只有一行的伸缩容器上没有效果。flex-start没有行间距flex-end底对齐没有行间距center居中没有行间距space-between两端对齐，中间自动分配space-around自动分配距离
⒌flex是flexiblebox的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。能够高效方便的控制元素的对齐、排列，自动计算布局内元素的尺寸，无论元素的尺寸是固定的还是动态的，控制元素在页面的布局方向。弹性盒子由弹性容器(flexcontainer)和弹性子元素(flexitem)组成。弹性容器设置属性?display:flex;一、容器属性flex-flow复合属性，是flex-direction和flex-wrap的简写形式。默认值：flex-flow:rownowrap;⑴flex-direction子元素排列方向flex-direction:row;从左到右flex-direction:row-reverse;从右到左flex-direction:column;从上到下flex-direction:column-reverse;从下到上⑵flex-wrap子元素换行方式flex-wrap:nowrap;不换行flex-wrap:wrap;换行flex-wrap:wrap-reverse;反转wrap排列，行颠倒justify-content子元素沿主轴对齐方式justify-content:flex-start;justify-content:space-between;align-items子元素在交叉轴上对齐方式align-items:center;垂直方向居中align-items:flex-start;垂直方向的顶部/交叉轴的起点对齐align-items:flex-end;垂直方向的底部/交叉轴的终点对齐align-items:baseline;项目的第一行的文字的基线对齐align-items:stretch;默认值，如果项目未设置高度或设为auto，将占满整个容器的高度二、子元素属性（写在子元素下align-self用于设置弹性子元素自身在侧轴（纵轴方向上的对齐方式。允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。align-items:center;align-items:flex-start;align-items:flex-end;align-items:baseline;align-items:stretch;order定义子元素的排列顺序。数值越小，排列越靠前，默认为order:;，可以为负值。flex-grow定义子元素的扩展比率，主要作用：分配剩余空间。负值无效。flex-grow:;默认值，即如果存在剩余空间，也不放大。flex-grow:;如果存在剩余空间，放大，等分剩余空间。flex-shrink定义子元素的收缩比率，值越大，按比例缩的就越小。flex-shrink:;默认值，即如果空间不足，缩小。flex-shrink:;不缩小。flex-basis定义元素的默认基准值。设置了flex-basis，width就不起作用；同时存在的时候，优先使用flex-basis。如果容器的宽度太小，子元素排列不下，设置的flex-basis的宽度会自动缩小，直到占满容器。链接：
⒍使用什么代码来控制弹性布局和网格布局的间隔
⒎使用CSS中的margin和padding代码来控制弹性布局和网格布局的间隔。根据查询相关公开信息显示，使用CSS中的margin和padding属性可以控制弹性布局和网格布局的间隔。
⒏CSS:Flex弹性布局
⒐弹性元素是container直接的在文档流中的子元素container在文档流中的子元素才是弹性子元素弹性元素的默认宽高为内容宽高flex-direction:row|row-reverse|column|column-reversecontainer内的排列顺序:从左往右从右往左从上往下从小往上(都是从container对应方向边缘开始)flex-wrap:nowrap|wrap|wrap-reverseorder:《integer》initial:两个黄色元素没有设置order,默认为flex-basis:《height》|《width》设置的是宽还是高根据主轴来定,如果主轴是行则设置默认宽度,如果主轴是列则设置默认高度flex-grow:《integer》initial:弹性元素的宽或高计算:flex-basis+flow-grow/sum(flow-grow)*remainflex-shrink:《integer》initial:弹性元素的宽或高计算:flex-basis+flow-shrink/sum(flow-shrink)*remain这里的remain是负值,表示超出的内容大小flex:《flex-grow》||《flex-shrink》||《flex-basis》initial:main-size(main-size元素沿主轴方向默认尺寸)justify-content:flex-start|flex-end|center|space-between|space-around效果依次如下:align-items:flex-start|flex-end|center|stretch|baselinealign-self:auto|flex-start|flex-end|center|baseline|stretchinitial:auto当多行时:应用于行align-content:flex-start|flex-end|center|space-between|space-around|stretch