布局神器---flexbox

1.flexbox

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

2.flex容器的属性:

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

3. flex项目属性:

  1. 控制flex容器中flex项目的排列顺序order,默认值是0
  2. 制定flex项目的放大和缩小比例,决定了flex项目相对flex容器自由空间进行放大缩小flex-grow、flex-shrink
  3. 制定flex项目的大小flex-basis(与width和height相同)
  4. flex(flex-grow,flex-shrink,flex-basis属性的简写)
  5. 使用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; }

效果如图:
布局神器---flexbox_第1张图片

你可能感兴趣的:(Flex,css3,布局)