布局神器---flexbox

来源：互联网发布：js 60s倒计时编辑：程序博客网时间：2024/05/17 05:06

1.flexbox

flexbox：
是css3中的新的布局模式，可以控制未知容器元素的对齐方式、排列方向、排列顺序。
flex布局：（由父元素和它的直接子元素组成）
父元素：成为flex容器
直接子元素：成为flex项目/flex item

2.flex容器的属性：

设置display:flex;/display:inline-flex;
设置flex容器的主轴方向，执行flex项目在flex容器中的排列方式。
flex-direction:row/row-reverse/column/column-reverse;
flex项目在flex容器中默认显示一行，若控制flex项目在flex容器按一行或者多行排列flex-wrap:nowrap(默认值)/wrap/wrap-reverse;
flex-flow(是flex-direction和flex-wrap属性的简写)
制定flex项目在flex容器沿着主轴在当前行的对齐方式justify-content:flex-start/flex-end/center/space-between/space-around;
flex项目在容器側轴对齐方式，类似于justify-content,align-items:stretch（填满默认值）/flex-start/flex-end/center/baseline;
flex容器内的行内flex容器中側轴排列方式align-content:stretch/flex-start/flex-end/center/space-between/space-around;
flex容器上不能使用::first-line和::first-letter伪元素.所有column-*属性在flex容器上都不生效

3. flex项目属性：

控制flex容器中flex项目的排列顺序order，默认值是0
制定flex项目的放大和缩小比例，决定了flex项目相对flex容器自由空间进行放大缩小flex-grow、flex-shrink
制定flex项目的大小flex-basis（与width和height相同）
flex(flex-grow,flex-shrink,flex-basis属性的简写)
使用align-self属性可以指定flex项目自身的对齐方式或者使用align-items来指定单个flex项目。
使用align-items对齐方式来解释flex容器，能更好的理解他们的值。

4. 快速布局实例：

<!DOCTYPE><html>  <head>    <meta charset="utf-8">    <link href="task22.css" rel="stylesheet">  </head>  <body>    <div class="root">      <div class="child1">        <div class="child2">          <div class="child3">          </div>          <div class="child3">          </div>        </div>        <div class="child2">          <div class="child3">          </div>          <div class="child3">          </div>        </div>      </div>      <div class="child1">        <div class="child2">          <div class="child3">          </div>          <div class="child3">          </div>        </div>        <div class="child2">          <div class="child3">          </div>          <div class="child3">          </div>        </div>      </div>    </div>    <form>      <input type="radio" name="traverse" id="before"/>      <label for="before">前序遍历</label>      <input type="radio" name="traverse" id="middle"/>      <label for="middle">中序遍历</label>      <input type="radio" name="traverse" id="behind"/>      <label for="behind">后序遍历</label>    </form>  </body></html>

.root {  display: flex;  border: 1px solid black;  margin: 20px;  padding: 10px;  width: 1000px;  height: 300px;  flex-direction: row;}.child1 {  display: flex;  border: 1px solid black;  margin: 20px;  flex-grow: 1;}.child2 {  display: flex;  border: 1px solid black;  margin: 20px;  flex-grow: 1;}.child3 {  border: 1px solid black;  margin: 20px;  flex-grow: 1;}

效果如图:
这里写图片描述

大神参考文章：
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

0 0