<p><br/></p><p>常见父项属性</p><p>flex-direction:设置主轴的方向</p><p>flex-direction属性值有row(默认值从左到右)，row-reverse(从右到左)，column(从上到下)，column-reverse(从下到上)</p><p>justify-content:设置主轴上的子元素排列方式</p><p>justify-content属性定义了项目在主轴上的对齐方式，我们需要在使用之前确定好主轴是哪个</p><p>justify-content属性值有flex-start(默认值从头部开始，如果主轴是X轴，则从左到右)，flex-end(从尾部开始排列)，center(在主轴居中对齐，如果主轴是X轴则水平居中)</p><p>space-around(平分剩余空间)，space-between(先两边贴边,再平分剩余空间)</p><p>flex-wrap:设置子元素是否换行</p><p>flex-wrap属性值nowrap(默认值不换行)，wrap(换行)</p><p>align-items:设置侧轴上的子元素的排列方式（单行）</p><p>该属性是控制子项在侧轴（默认是Y轴）上的排列方式，在子项为单项的时候使用。属性值有flex-start(默认值侧轴从上到下)，flex-end(侧轴从下到上)，center(挤在一起居中，侧轴垂直居中)，stretch（侧轴拉伸）</p><p>align-content:设置侧轴上的子元素的排列方式（多行）</p><p>该属性设置子项在侧轴上的排列方式，并且只能用于子项出现换行的情况(多行！！！)，在单行下没有效果</p><p><img src="http://img.80zx.com/ueditor/image/202008/159783734266a219.jpg" title="QQ图片20200819190824" alt="QQ图片20200819190824"/></p><p>flex-flow:复合属性，相当于同时设置flex-direction和flex-wrap</p><p>常见子项属性</p><p>flex: 子项目占的份数</p><p>flex属性定义子项目分配剩余空间，用flex来表示占多少份。默认为0</p><p>align-self: 控制子项自己在侧轴的排列方式</p><p>align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值是auto，表示继承父元素的align-items属性。如果没有父元素，则等同于stretch。</p><p>order：定义子项的排列顺序(前后顺序)，数值越小，排列越靠前，默认为0。</p><p><br/></p><h1 class="title-article" style="box-sizing: border-box; outline: 0px; margin: 0px; padding: 0px; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; font-size: 28px; overflow-wrap: break-word; color: rgb(34, 34, 38); word-break: break-all; font-variant-ligatures: common-ligatures; white-space: normal; background-color: rgb(255, 255, 255);">flex布局兼容性写法</h1><h3 style="box-sizing: border-box; outline: 0px; margin: 8px 0px 16px; padding: 0px; font-family: "Microsoft YaHei", "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", sans-serif; font-size: 22px; color: rgb(79, 79, 79); line-height: 30px; overflow-wrap: break-word; font-variant-ligatures: common-ligatures; white-space: normal; background-color: rgb(255, 255, 255);">CSS样式</h3><ul style="list-style-type: none;" class=" list-paddingleft-2"><li><p>flex：定义布局为盒模型</p></li><li><p>flex-v：盒模型垂直布局</p></li><li><p>flex-1：子元素占据剩余的空间</p></li><li><p>flex-align-center：子元素垂直居中</p></li><li><p>flex-pack-center：子元素水平居中</p></li><li><p>flex-pack-justify：子元素两端对齐</p></li></ul><pre class="brush:css;toolbar:false">.flex {<br/> display: -webkit-box;<br/> display: -webkit-flex;<br/> display: -ms-flexbox;<br/> display: flex;<br/>}<br/><br/>.flex-v {<br/> -webkit-box-orient: vertical;<br/> -webkit-flex-direction: column;<br/> -ms-flex-direction: column;<br/> flex-direction: column;<br/>}<br/><br/>.flex-1 {<br/> -webkit-box-flex: 1;<br/> -webkit-flex: 1;<br/> -ms-flex: 1;<br/> flex: 1;<br/>}<br/><br/>.flex-align-center {<br/> -webkit-box-align: center;<br/> -webkit-align-items: center;<br/> -ms-flex-align: center;<br/> align-items: center;<br/>}<br/><br/>.flex-pack-center {<br/> -webkit-box-pack: center;<br/> -webkit-justify-content: center;<br/> -ms-flex-pack: center;<br/> justify-content: center;<br/>}<br/><br/>.flex-pack-justify {<br/> -webkit-box-pack: justify;<br/> -webkit-justify-content: space-between;<br/> -ms-flex-pack: justify;<br/> justify-content: space-between;<br/>}<br/></pre><p>横向垂直居中flex写法</p><pre style="box-sizing: inherit; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 15px; margin-top: 14px; margin-bottom: 14px; line-height: 1.45; padding: 16px; overflow: auto; background-color: rgb(247, 247, 247); border: 0px; border-radius: 3px; color: rgb(82, 82, 82);"><code class="ಠhighlight-container" style="box-sizing: inherit; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 1em; display: inline; border-radius: 4px; padding: 0px; background-color: transparent; word-break: break-all; line-height: inherit; margin: 0px; max-width: 100%; overflow: initial; border: 0px; tab-size: 4;"><span class="token punctuation" style="box-sizing: inherit; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; color: rgb(153, 153, 153);">.</span>v<span class="token operator" style="box-sizing: inherit; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; color: rgb(154, 110, 58); background: rgba(255, 255, 255, 0.5);">-</span>center<span class="token punctuation" style="box-sizing: inherit; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; color: rgb(153, 153, 153);">{</span>display<span class="token punctuation" style="box-sizing: inherit; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; color: rgb(153, 153, 153);">:</span>flex<span class="token punctuation" style="box-sizing: inherit; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; color: rgb(153, 153, 153);">;</span>align<span class="token operator" style="box-sizing: inherit; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; color: rgb(154, 110, 58); background: rgba(255, 255, 255, 0.5);">-</span>items<span class="token punctuation" style="box-sizing: inherit; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; color: rgb(153, 153, 153);">:</span> center<span class="token punctuation" style="box-sizing: inherit; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; color: rgb(153, 153, 153);">;</span>justify<span class="token operator" style="box-sizing: inherit; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; color: rgb(154, 110, 58); background: rgba(255, 255, 255, 0.5);">-</span>content<span class="token punctuation" style="box-sizing: inherit; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; color: rgb(153, 153, 153);">:</span>center<span class="token punctuation" style="box-sizing: inherit; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; color: rgb(153, 153, 153);">;</span><span class="token punctuation" style="box-sizing: inherit; -webkit-tap-highlight-color: transparent; text-size-adjust: none; -webkit-font-smoothing: antialiased; color: rgb(153, 153, 153);">}</span></code></pre><p><br/></p>
相关文章
