HTML+CSS笔记 14：CSS 弹性盒flex

弹性盒

• 是CSS中的又一种布局手段，它主要用来代替浮动来完成页面的布局
• 可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变
• 两个概念
  • 弹性容器
    • 要使用弹性盒，必须先将一个元素设置为弹性容器
    • 通过display来设置弹性容器 display:flex display:inline-flex
  • 弹性元素
    • 弹性容器的子元素是弹性元素（弹性项）
    • 一个元素可以同时是弹性容器和弹性元素

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

ul {
  width: 800px;
  border: 10px red solid;
  display: flex;
  /* 
    指定容器中弹性元素的排列方式
        row 默认值 水平排列（自左向右）
        row-reverse 反向水平排列（自右向左）
        column 垂直排列（自上到下）
        column-reverse 反向垂直排列（自下到上）
    主轴：弹性元素的排列方向
    侧轴：与主轴垂直方向的称为侧轴
  */
  flex-direction: row;
}
li {
  width: 400px;
  height: 100px;
  background-color: #bfa;
  font-size: 50px;
  text-align: center;
  line-height: 100px;
  /* 
    指定弹性元素的伸展的系数（默认值为0）
        当父元素有多余的空间时，子元素如何伸展
        父元素的剩余空间会按照比例进行分配
  */
  /* flex-grow: 1; */
  /* 
    指定弹性元素的收缩系数
        当父元素中的空间不足以容纳所有的子元素时，如何对子元素进行收缩
  */
  flex-shrink: 6;
}

li:nth-child(2) {
  background-color: pink;
  /* flex-grow: 2; */
  flex-shrink: 2;
}
li:nth-child(3) {
  background-color: orange;
  /* flex-grow: 3; */
  flex-shrink: 1;
}

弹性容器的样式

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

ul {
  width: 1000px;
  border: 10px red solid;
  display: flex;
  flex-direction: row;
  /*
    设置弹性元素是否在弹性容器中自动换行
      nowrap 默认值，不会自动换行
      wrap 元素沿着辅轴方向自动换行
      wrap-reverse 元素沿着辅轴反方向换行
  */
  flex-wrap: wrap-reverse;
  /* flex-wrap 和 flex-direction的简写属性 */
  flex-flow: row nowrap;
  /* 
    主轴上的元素如何排列
      flex-start 元素沿着主轴起边排列
      flex-end 元素沿着主轴终边排列
      center 元素居中排列
      space-around 空白分布到元素两侧
      space-evenly 空白分布到元素的单侧（兼容性不好）
      space-between 空白均匀分布在元素间
  */
  justify-content: center;
}
li {
  width: 200px;
  height: 100px;
  background-color: #bfa;
  font-size: 50px;
  text-align: center;
  line-height: 100px;
  flex-shrink: 0;
}
li:nth-child(2) {
  background-color: pink;
}
li:nth-child(3) {
  background-color: orange;
}

---

<ul>
    <li>1</li>
    <li>2
        <div>2</div>
    </li>
    <li>3
        <div>3</div>
        <div>3</div>
    </li>
    <li>4</li>
    <li>
        5
        <div>5</div>
    </li>
</ul>

ul {
  width: 700px;
  height: 800px;
  border: 10px red solid;
  display: flex;
  flex-flow: row wrap;
  /* 
    元素在辅轴上如何对其（元素间的关系）
      stretch 默认值，将元素的长度设置为相同的值
      flex-start 元素不会拉伸，沿着辅轴起边对其
      flex-end 元素不会拉伸，沿着辅轴终边对其
      center 居中对其
      baseline 基线对其
  */
  align-items: flex-start;
  /* 
    辅轴空白空间的分布，取值与 justify-content 一致
  */
  align-content: flex-start;
}
li {
  width: 200px;
  background-color: #bfa;
  font-size: 50px;
  text-align: center;
  line-height: 100px;
  flex-shrink: 0;
}
li:nth-child(1) {
  /* 用来覆盖当前弹性元素上的 align-items */
  align-self: flex-end;
}
li:nth-child(2) {
  background-color: pink;
}
li:nth-child(3) {
  background-color: orange;
}
li:nth-child(4) {
  background-color: rosybrown;
}
li:nth-child(5) {
  background-color: tomato;
}

弹性元素的样式

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

ul {
  width: 900px;
  border: 10px red solid;
  display: flex;
}
li {
  width: 200px;
  background-color: #bfa;
  font-size: 50px;
  text-align: center;
  line-height: 100px;
  /* 弹性元素的增长系数 */
  /* flex-grow: 1; */
  /* 
    弹性元素的缩减系数
      缩减系数的计算方式比较复杂
      缩减多少是根据缩减系数和元素大小来计算的
  */
  flex-shrink: 1;
  /* 
    元素的基础长度
      指定的是元素在主轴上的基础长度
      如果主轴是横向的，则该值指定的是元素的宽度
      如果主轴是纵向的，则该值指定的是元素的高度
      auto 默认值，表示参考元素自身的高度或宽度
      如果传递了一个具体的数值，则以该值为准
  */
  flex-basis: 100px;
  /* 
    简写属性：顺序为 flex-grow flex-shrink flex-basis
      initial 相当于 0 1 auto
      auto 相当于 1 1 auto
      none 相当于 0 0 auto
  */
  flex: 1 1 100px;
}
li:nth-child(1) {
  /* 决定弹性元素的排列顺序 */
  order: 3;
}
li:nth-child(2) {
  background-color: pink;
  /* flex-grow: 3; */
  order: 1;
}
li:nth-child(3) {
  background-color: orange;
  /* flex-grow: 5; */
  order: 2;
}