flex布局

flex 布局

• flex-direction: row（默认） | row-reverse | column | column-reverse;
• flex-wrap: nowrap（默认） | wrap | wrap-reverse;
• justify-content: flex-start（默认） | flex-end | center | space-between | space-around;
• align-items: flex-start（默认） | flex-end | center | baseline | stretch;
• align-content: flex-start（默认） | flex-end | center | space-between | space-around | stretch;
• align-self: auto（默认） | flex-start | flex-end | center | baseline | stretch;

flex-direction

flex-direction: row（默认） | row-reverse | column | column-reverse;

<h1>flex-direction</h1>
<p>flex-direction: row（默认）</p>
<div class="box-direction">
        <div class="child1">1</div>
        <div class="child2">2</div>
        <div class="child3">3</div>
    </div>
<p>flex-direction: row-reverse</p>
<div class="box-direction row-reverse">
        <div class="child1">1</div>
        <div class="child2">2</div>
        <div class="child3">3</div>
    </div>
<p>flex-direction: column</p>
<div class="box-direction column">
        <div class="child1">1</div>
        <div class="child2">2</div>
        <div class="child3">3</div>
    </div>
<p>flex-direction: column-reverse</p>
<div class="box-direction column-reverse">
        <div class="child1">1</div>
        <div class="child2">2</div>
        <div class="child3">3</div>
    </div>

.box-direction {
  width: 600px;
  height: 300px;
  background: #ddd;
  display: flex;
  margin: 10px auto;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.child1 {
  width: 150px;
  background: red;
  font-size: 10px;
  height: 70px;
}
.child2 {
  width: 150px;
  background: yellow;
  font-size: 15px;
  height: 70px;
}
.child3 {
  width: 150px;
  background: blue;
  font-size: 20px;
  height: 70px;
}
.row-reverse {
  flex-direction: row-reverse;
}
.column {
  flex-direction: column;
}
.column-reverse {
  flex-direction: column-reverse;
}

flex-wrap

flex-wrap: nowrap（默认） | wrap | wrap-reverse;

<h1>flex-wrap</h1>
<p>flex-wrap: nowrap(默认)</p>
<div class="box-wrap">
        <div class="child1">1</div>
        <div class="child2">2</div>
        <div class="child3">3</div>
        <div class="child1">1</div>
        <div class="child2">2</div>
        <div class="child3">3</div>
    </div>
<p>flex-wrap: wrap</p>
<div class="box-wrap wrap">
        <div class="child1">1</div>
        <div class="child2">2</div>
        <div class="child3">3</div>
        <div class="child1">1</div>
        <div class="child2">2</div>
        <div class="child3">3</div>
    </div>
<p>flex-wrap: wrap-reverse</p>
<div class="box-wrap wrap-reverse">
        <div class="child1">1</div>
        <div class="child2">2</div>
        <div class="child3">3</div>
        <div class="child1">1</div>
        <div class="child2">2</div>
        <div class="child3">3</div>
    </div>

.box-wrap {
  width: 600px;
  height: 300px;
  background: #ddd;
  display: flex;
  margin: 10px auto;
  justify-content: flex-start;
}
.wrap {
  flex-wrap: wrap;
}
.wrap-reverse {
  flex-wrap: wrap-reverse;
}

justify-content

justify-content: flex-start（默认） | flex-end | center |
space-between | space-around;

<h1>justify-content</h1>
<p>justify-content: left;</p>
<div class="box">
      <div class="child1">1</div>
      <div class="child2">2</div>
      <div class="child3">3</div>
    </div>
<p>
      justify-content: center;
    </p>
<div class="box box1">
      <div class="child1">1</div>
      <div class="child2">2</div>
      <div class="child3">3</div>
    </div>
<p>
      justify-content: space-around;
    </p>
<div class="box box2">
      <div class="child1">1</div>
      <div class="child2">2</div>
      <div class="child3">3</div>
    </div>
<p>
      justify-content: space-between;
    </p>
<div class="box box3">
      <div class="child1">1</div>
      <div class="child2">2</div>
      <div class="child3">3</div>
    </div>
<p>
      justify-content: space-evenly;
    </p>
<div class="box box4">
      <div class="child1">1</div>
      <div class="child2">2</div>
      <div class="child3">3</div>
    </div>

.box {
  width: 600px;
  height: 200px;
  background: #ddd;
  display: flex;
  margin: 10px auto;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.box1 {
  justify-content: center;
}
.box2 {
  justify-content: space-around;
}
.box3 {
  justify-content: space-between;
}
.box4 {
  justify-content: space-evenly;
}

align-items

align-items: flex-start（默认） | flex-end | center | baseline | stretch;

<h1>align-items</h1>
<p>align-items: center;</p>
<div class="box box5">
      <div class="child1">1</div>
      <div class="child2">2</div>
      <div class="child3">3</div>
    </div>
<p>align-items: stretch;</p>
<div class="box box6">
      <div class="child1">1</div>
      <div class="child2">2</div>
      <div class="child3">3</div>
    </div>
<p>align-items: flex-end;</p>
<div class="box box7">
      <div class="child1">1</div>
      <div class="child2">2</div>
      <div class="child3">3</div>
    </div>
<p>align-items: baseline;</p>
<div class="box box8">
      <div class="child1">1</div>
      <div class="child2">2</div>
      <div class="child3">3</div>
    </div>

.box5 {
  align-items: center;
}
.box6 {
  align-items: stretch;
}
.box7 {
  align-items: flex-end;
}
.box8 {
  align-items: baseline;
}

align-content

align-content: flex-start（默认） | flex-end | center | space-between | space-around | stretch;

<h1>align-content</h1>
<p>align-content: center;</p>
<div class="box box9">
        <div class="child1">1</div>
        <div class="child2">2</div>
        <div class="child3">3</div>
        <div class="child1">1</div>
        <div class="child2">2</div>
        <div class="child3">3</div>
    </div>
<p>align-content: flex-end;</p>
<div class="box box10">
        <div class="child1">1</div>
        <div class="child2">2</div>
        <div class="child3">3</div>
        <div class="child1">1</div>
        <div class="child2">2</div>
        <div class="child3">3</div>
    </div>
<p>align-content: space-around;</p>
<div class="box box11">
        <div class="child1">1</div>
        <div class="child2">2</div>
        <div class="child3">3</div>
        <div class="child1">1</div>
        <div class="child2">2</div>
        <div class="child3">3</div>
    </div>
<p>align-content: space-between;</p>
<div class="box box12">
        <div class="child1">1</div>
        <div class="child2">2</div>
        <div class="child3">3</div>
        <div class="child1">1</div>
        <div class="child2">2</div>
        <div class="child3">3</div>
    </div>
<p>align-content: stretch;</p>
<div class="box box13">
        <div class="child1">1</div>
        <div class="child2">2</div>
        <div class="child3">3</div>
        <div class="child1">1</div>
        <div class="child2">2</div>
        <div class="child3">3</div>
    </div>
<p>align-content: start;(默认)</p>
<div class="box box14">
        <div class="child1">1</div>
        <div class="child2">2</div>
        <div class="child3">3</div>
        <div class="child1">1</div>
        <div class="child2">2</div>
        <div class="child3">3</div>
    </div>

.box9 {
  align-content: center;
}
.box10 {
  align-content: flex-end;
}
.box11 {
  align-content: space-around;
}
.box12 {
  align-content: space-between;
}
.box13 {
  align-content: stretch;
}
.box14 {
  align-content: flex-start;
}

align-self

align-self: auto（默认） | flex-start | flex-end | center | baseline | stretch;

<h1>align-self</h1>
<p>align-self: center;</p>
<div class="box-alignSelf">
        <div class="child1 self">1</div>
        <div class="child2">2</div>
        <div class="child3">3</div>
        <div class="child1">1</div>
        <div class="child2">2</div>
        <div class="child3">3</div>
    </div>

.box-alignSelf {
  width: 600px;
  height: 300px;
  background: #ddd;
  display: flex;
  margin: 10px auto;
}
.self {
  align-self: center;
}

flex:1

<h1>flex:Number</h1>
<p>
      flex1:1 / flex2:1 / flex3:0   表示flex1和flex2宽度按比例缩放，flex3不缩放。按比例占有剩余空间
    </p>
<div class="box">
      <div class="child1 flex1">1</div>
      <div class="child2 flex2">2</div>
      <div class="child3 flex3">3</div>
    </div>

.flex1 {
  flex: 1;
}
.flex2 {
  flex: 1;
}
.flex3 {
  flex: 0;
}