好久没写博客了。这里整理一下之前学习flex布局的一个笔记。把它贴在你的博客上。赶上五月的末班车。还是要坚持！！flex弹性布局FlexBox可以控制子元素：水平或垂直排列控制子元素的对齐方式控制子元素的高度/宽度控制子元素的显示顺序控制子元素是否折叠display:flex;创建一个Flexbox元素在flex布局中必须要了解的概念就是区分主轴和副轴（侧轴）：在项目中，我们使用display:flex;创建一个Flexbox元素，那么这个元素就变成了一个弹性容器（elasticcontainer）。它在文档流中的直接子项将成为弹性项目。flexitem子元素在容器中排列的方向称为主轴，垂直于主轴的方向称为副轴。方向相关的属性flex-direction设置了子元素的排列方向（其实就是主轴的排列方向）。值为行|行反转|沿主轴方向放电时，是否可以改变值：nowrap|包装|wrap-reverse默认为nowrap，没有换行符/*basecss*/.container{width:400px;边距：20px；行高：40px；字体大小：20px；颜色：#fff；显示：flex；}.item{边距：10px；宽度：100px；行高：40px；'柔性方向'>||<'flex-wrap'>默认值：flex-flow:rownowrap;只需在这里组合这两个属性。order指定放置顺序，值从小到大：默认0，（支持负值和正值）elastic相关属性，都是在子元素上设置flex-basis来设置flex的初始宽/高值项目：主要尺寸|默认：main-size：主轴方向的宽度（根据flex-direction设置，水平排列时设置宽度；垂直排列时设置高度）flex-grow定义每个子元素能够灵活扩展盒子中剩余空间的能力（当有更多空间时）值：值：默认0，可以使用整数和小数剩余空间的分配规则：flex-basis+flow-grow/sum(flow-grow)*remainremain表示多余的空间这里可以看到只设置flex-basis相当于设置了元素的宽度。值为0时，不收缩）空间不足收缩规则：flex-basis+flow-grow/sum(flow-grow)*remainremain表示空间不足（负值）组合属性：flex<'flex-grow'>||<'弹性收缩'>||<'flex-basis'>默认值：flex:01main-size;看上面对齐相关的属性justify-content设置子元素在主轴方向的值：flex-start|弹性端|中心|间隔|space-around默认flex-start示例：当切换主轴方向时，align-items设置副轴上的对齐方式。值：弹性启动|弹性端|中心|基线|stretch默认在子元素上设置stretchalign-self，单独设置子元素在次轴方向的对齐方式取值：flex-start|弹性端|中心|基线|stretch默认stretchalign-content多行内容设置在辅助轴方向，行的对齐值为：flex-start|弹性端|中心|间隔|:https://blog.guowenfh.com/201...
