文章目录

  • Flex弹性盒子
    • 1.说在前头
      • 1.1.Flex布局出现之前
      • 1.2.Flex布局出现后
    • 2.什么是Flex布局?
    • 3.Flex container/item（父/子容器）的常用属性
    • 4.Let's Codeing（父容器的属性）
      • 4.1.display:flex;
      • 4.2.flex-direction ~ ~ ~ 容器排列方式
      • 4.3.flex-wrap……子项目多行
      • 4.4.justify-content……用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
      • 4.5.align-content……副轴（竖轴）对齐方式（适用于多行）
      • 属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。
      • 4.6.align-items……垂直对齐方式（适用于单行）
      • 4.7.align-items 和 align-content 的区别
    • 5.当切换容器排列方式后，水平对齐以及垂直对齐的 应用 变化（重点、难点⭐⭐⭐⭐⭐）
    • 6.Let's Codeing（子项目的属性）
      • 6.1.order: number ; 顺序指定
      • 6.2.flex-grow……子项目延伸比率
      • 6.3.flex-basis……子项目的==基本宽度==
      • 6.3.flex-shink……子项目收缩比率
      • 6.4.flex: …… ; 再来一个实用的吧
      • 6.5.align-self……子元素垂直对齐（self 子项目 自己 单独的排列方式）
    • 7.弹性盒子总结图（你的备忘录⭐⭐⭐）

Flex弹性盒子

1.说在前头

1.1.Flex布局出现之前

  • 我们知道传统的页面布局依赖于 盒状模型
  • 依赖于display、position、float属性
  • 对于某些特殊布局来说特别不方便，比如垂直居中（比较不容易实现）

1.2.Flex布局出现后

  • 2009年，W3C提出Flex布局
  • 简便、完整、响应式的各种实现页面布局（目前已得到所有主流浏览器的支持）
  • 意味着我们能很安全的使用这个功能

2.什么是Flex布局?

  • Flex就是弹性布局

    1. 弹性布局中弹性容器三个子元素，可以在任何方向上排布，可以任意伸缩它的尺寸
    2. 一个Flexbox只能处理一个维度的布局

  • 基本构造

3.Flex container/item（父/子容器）的常用属性

针对于容器的 针对于item的
flex-direction flex-grow
flex-wrap flex-shrink
flex-flow flex-basis
align-items flex
align-content align-self
justify-content order

4.Let’s Codeing（父容器的属性）

4.1.display:flex;

  • 当父元素设置为display:flex;的时候，它所有的子元素都成为它特有的成员，有自己的排列方式如图

html

<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div>
</div>

css

.container{margin:150px auto;max-width: 800px;height: 400px;background-color: rgb(196, 229, 232);border: 5px solid rgb(0, 181, 203);display: flex;
}
.item{background-color: rgb(0, 181, 203);color: white;width: 100px;height: 100px;margin: 2px;font-weight: bold;font-size: 5em;text-align: center;
}

(王爷)演示

加入display:flex;

.container{margin:150px auto;max-width: 800px;height: 400px;background-color: rgb(196, 229, 232);border: 5px solid rgb(0, 181, 203);display: flex; <-----
}

然后我们再看一下王爷

4.2.flex-direction ~ ~ ~ 容器排列方式

  • flex-direction: row(默认值 横向 从左至右))

  • flex-direction: row-reverse(横向 从右至左)

  • flex-direction: column(竖向 从上至下)

  • flex-direction: column-reverse(竖向 从下至上)

4.3.flex-wrap……子项目多行

  • flex-wrap: nowrap ;（默认值 不换行）

  • flex-wrap: wrap ;（换行）

  • flex-wrap: wrap-reverse ;（倒序换行）

我们试试两个属性一起使用

  • 将排列设置横向倒序排列（row-reverse）

  • 将换行设置为自动换行（wrap）

    • flex-flow: row-reverse wrap;

4.4.justify-content……用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。