弹性细节
时间：2023-03-30 17:41:26
CSS
flex之前是怎么布局的？normalflow（文档流）floatpositiondisplayinline-blocknegativemaringflex介绍特点：块级布局关注垂直方向，内联布局关注水平方向，flex布局是方向无关的flex布局可以实现自动空间分配，自动Alignment(flexible:elastic,flexible)flex适用于简单的线性布局，更复杂的布局交给网格布局（暂未发布）。用法只需在父元素上添加一个display:flex//CSS.parent{display:flex;背景：#ccc;}.parentdiv{宽度：100px;高度：50px；背景：淡紫色；margin:15px;
flex父元素的属性如下属性都写在父元素中以下属性都写在父元素中元素中）里面的子元素默认从左到右排列，从右到左排列flex-direction:row-reverseverticallyfromtoptobottomflex-direction:columnverticallyfrombottomtotopwrap不换行flex-wrap:nowrapwrapsflex-wrap:wrap（flex-wrap一般和flex-direction一起使用）flex-flow是上面两个flex-flow的简写：rownowrapjustify-content所有子元素的主轴方向对齐盒子在空间居中justify-content:space-between所有子元素盒子都放在中间justify-content:center所有子元素盒子都在周围（allaround）justify-content:space-aroundallchildelementboxesareLeft(allatthestartingpoint)justify-contentt:space-start所有子元素框都在右边（都在终点）justify-content:space-endalign-items侧轴对齐（控制子元素的对齐方式父子没有width和height)所有子元素以最高高度为准（默认）align-items:stretch所有子元素向起点倾斜--顶部对齐align-items:flex-start所有子元素向终点倾斜---底部对齐align-items:flex-endAll所有子元素向起点倾斜--centeralign-items:flex-centeralign-content多行/列内容对齐（较少使用）将所有子元素向起点倾斜起点align-content:flex-start对齐所有子元素到终点align-content:flex-end均匀分布所有子元素（默认）align-content:stretch在子元素中间放置空间align-content:space-between在子元素两边放空格align-content:space-betweenflex的属性子元素都写在子元素里。以下属性都写在子元素中。以下属性写在子元素中。-shrink收缩率（空间不够时）数字越大，收缩率越大flex-shrink:2flex-basis默认尺寸（一般不用）默认尺寸flex-basis:300pxflex以上三个缩写flex:12300像素;orderorder(而不是双飞翼)顺序为先(每个子元素都要写)order:1align-self自对齐如果父元素确定了统一对齐方式，这个元素允许子元素选择自己的对齐方式align-self：中心;推荐网址：https://www.runoob.com/w3cnot...
