基于 Flex 的简易布局代码

Question

使用方法：

      <div class="flex-row" >
        <div class="flex-1 justify-center align-center">
          ww
        </div>
        <div class="flex-1">
          weeeeeeeee
        </div>
        <div class="flex-3">
          nnnnnnnnnnnnnnnnn
        </div>

        <div class="flex-3">
          <div class="flex-column">
            <div class="flex-1">
              <div class="">
                bbbbbbbbbbbbbbbbb
              </div>
            </div>
            <div class="flex-1">
              bbbbbbbbbbbbb
            </div>
          </div>
        </div>
      </div>

配合 normalize.css 使用更佳

stylus 或 sass 代码：

.flex-row
  display: flex
  flex-direction: row
  flex-wrap: wrap
.flex-row-reverse
  display: flex
  flex-direction: row-reverse
  flex-wrap: wrap
.flex-column
  display: flex
  flex-direction: column
  flex-wrap: wrap
.flex-column-reverse
  display: flex
  flex-direction: column-reverse
  flex-wrap: wrap
.flex-1
  display: flex
  flex: 1
.flex-2
  display: flex
  flex: 2
.flex-3
  display: flex
  flex: 3
.flex-4
  display: flex
  flex: 4
.flex-5
  display: flex
  flex: 5
.flex-6
  display: flex
  flex: 6
.flex-7
  display: flex
  flex: 7
.flex-8
  display: flex
  flex: 8
.flex-9
  display: flex
  flex: 9
.flex-10
  display: flex
  flex: 10
.flex-11
  display: flex
  flex: 11
.justify-flex-start
  justify-content: flex-start
.justify-flex-end
  justify-content: flex-end
.justify-center
  justify-content: center
.justify-space-between
  justify-content: space-between
.justify-space-around
  justify-content: space-around
.align-flex-start
  align-items: flex-start
.align-flex-end
  align-items: flex-end
.align-center
  align-items: center
.align-baseline
  align-items: baseline
.align-stretch
  align-items: stretch

CSS 代码：

.flex-row {
  flex: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.flex-row-reverse {
  flex: 1;
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
}
.flex-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.flex-column-reverse {
  flex: 1;
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: wrap;
}
.flex-1 {
  display: flex;
  flex: 1;
}
.flex-2 {
  display: flex;
  flex: 2;
}
.flex-3 {
  display: flex;
  flex: 3;
}
.flex-4 {
  display: flex;
  flex: 4;
}
.flex-5 {
  display: flex;
  flex: 5;
}
.flex-6 {
  display: flex;
  flex: 6;
}
.flex-7 {
  display: flex;
  flex: 7;
}
.flex-8 {
  display: flex;
  flex: 8;
}
.flex-9 {
  display: flex;
  flex: 9;
}
.flex-10 {
  display: flex;
  flex: 10;
}
.flex-11 {
  display: flex;
  flex: 11;
}
.justify-flex-start {
  justify-content: flex-start;
}
.justify-flex-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-space-between {
  justify-content: space-between;
}
.justify-space-around {
  justify-content: space-around;
}
.align-flex-start {
  align-items: flex-start;
}
.align-flex-end {
  align-items: flex-end;
}
.align-center {
  align-items: center;
}
.align-baseline {
  align-items: baseline;
}
.align-stretch {
  align-items: stretch;
}