From 4e6f4691aa8f6bdf639557d84f19582c93de1b92 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E6=A2=A6=E6=B6=B5?= <3234558314@qq.com> Date: Wed, 6 Nov 2024 14:50:39 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../20241104Flex\345\270\203\345\261\200.md" | 216 ++++++++++++++++++ 1 file changed, 216 insertions(+) create mode 100644 "\351\231\210\346\242\246\346\266\265/20241104Flex\345\270\203\345\261\200.md" diff --git "a/\351\231\210\346\242\246\346\266\265/20241104Flex\345\270\203\345\261\200.md" "b/\351\231\210\346\242\246\346\266\265/20241104Flex\345\270\203\345\261\200.md" new file mode 100644 index 0000000..0c13c36 --- /dev/null +++ "b/\351\231\210\346\242\246\346\266\265/20241104Flex\345\270\203\345\261\200.md" @@ -0,0 +1,216 @@ +![十个方块](http://sloruc32g.hn-bkt.clouddn.com/GIF%202024-11-05%2015-02-17.gif?e=1730790459&token=0GjqvMqqimT2t3sunOWYp2T-lZm_vLxO4Bi_rARI:aW6om6wP2_jvfcD2m6h5f7HhEeQ=) +```css +.d2,.d3,.d4,.d5,.d6,.d7,.d8,.d9,.d10,.d11{ + width: 50px; + height: 50px; + background-color: aqua; + margin: 10px; + text-align: center; + line-height: 50px; +} +.d1{ + display: flex; + flex-wrap: wrap; + +} +@media (max-width: 400px) { + .d7, .d8, .d9, .d10,.d11 { + display: none; + } +} + + +
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
+ +``` +![骰子](http://sloruc32g.hn-bkt.clouddn.com/11.04.PNG?e=1730691846&token=0GjqvMqqimT2t3sunOWYp2T-lZm_vLxO4Bi_rARI:EKHdEizMPsj9W7nmPEXeXzh7MfE=) +```css +*{ + margin: 0px; + padding: 0px; + } +.d2,.d3,.d4,.d5,.d6,.d7,.d8,.d9,.d10,.d11{ + width: 70px; + height: 70px; + border: 2px solid red; + margin: 5px; + display: flex; + border-radius: 5px; +} +.d1{ + display: flex; + flex-wrap: wrap; +} +.d2{ + display: flex; + justify-content:center; + align-items: center; +} +.d3{ + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} +.d4{ + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; +} +.d4 li:nth-child(1){ + width: 50px; + padding-left: 10px; +} +.d4 li:nth-child(2){ + width: 50px; + padding-left: 30px; +} +.d4 li:nth-child(3){ + width: 50px; + padding-left: 50px; +} +.d5{ + display: flex; + justify-content:center; + align-items: center; + flex-wrap: wrap; +} +.d5 li{ + width: 30px; +} +.d6{ + display: flex; + justify-content:center; + align-items: center; + flex-wrap: wrap; +} +.d6 li:nth-child(3) { + width: 50px; + padding-left: 22px; +} +.d7{ + display: flex; + justify-content:center; + align-items: center; + flex-wrap: wrap; +} +.d7 li{ + width: 30px; +} +.d8{ + display: flex; + justify-content:center; + align-items: center; + flex-wrap: wrap; +} +.d8 li:nth-child(4){ + width: 50px; + padding-left: 25px; +} +.d9{ + display: flex; + justify-content:center; + align-items: center; + flex-wrap: wrap; +} +.d9 li:nth-child(4){ + width: 44px; +} +.d10{ + display: flex; + justify-content:center; + align-items: center; + flex-wrap: wrap; +} + + +
+
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
    + +``` +## flex布局 +默认文档流中，在一个父容器里放置多个块级的子元素，那么，这些子元素会默认从上往下排列 + +如果我给父容器仅仅加一个 `display: flex`属性，子元素们会**在水平方向上，从左至右排列** +### flex 布局的优势 + +1、**flex 布局的子元素不会脱离文档流**，很好地遵从了“流的特性”。 + +用 float 来做布局，float 属性的元素会脱离文档流，而且会涉及到各种 BFC、清除浮动的问题。浮动相关的问题，比较麻烦，所以也成了面试必问的经典题目。但有了 flex 布局之后，这些问题都不存在的 + +2、**flex 是一种现代的布局方式，是 W3C 第一次提供真正用于布局的 CSS 规范** + +### 弹性盒子、子元素 +- **弹性盒子**：指的是使用 `display:flex` 或 `display:inline-flex` 声明的**父容器** +- **子元素/弹性元素**：指的是父容器里面的子元素们（父容器被声明为 flex 盒子的情况下） + +注：一般是用 `display:flex`这个属性。`display:inline-flex`用得较少 +### 主轴和侧轴 +在上面的“初体验”例子中，我们发现，弹性盒子里面的子元素们，默认是从左至右排列的，这个方向，代表的就是主轴的方向。 + +- 主轴：flex容器的主轴，默认是水平方向，从左向右。 +- 侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向，从上往下。 + +注：主轴和侧轴并不是固定不变的，可以通过 `flex-direction` 更换方向，我们在后面会讲到。 + +### flex-direction 属性 + +`flex-direction`：用于设置盒子中**子元素**的排列方向。属性值可以是： + +| 属性值 | 描述 | +|:-------------|:-------------| +| row | 从左到右水平排列子元素（默认值） | +|column|从上到下垂直排列子元素| +| row-reverse |从右向左排列子元素 | +|column-reverse|从下到上垂直排列子元素| + +注：如果我们不给父容器写`flex-direction`这个属性，那么，子元素默认就是从左到右排列的。 +### flex-wrap 属性 +`flex-wrap`：控制子元素溢出时的换行处理。 + +### justify-content 属性 +- `justify-content: flex-start;` 设置子元素在**主轴上的对齐方式**。属性值可以是： + - `flex-start` 从主轴的起点对齐（默认值） + - `flex-end` 从主轴的终点对齐 + - `center` 居中对齐 + - `space-around` 在父盒子里平分 + - `space-between` 两端对齐 平分 + +### align-items 属性 +`align-items`：设置子元素在**侧轴上的对齐方式**。属性值可以是： + - `flex-start` 从侧轴开始的方向对齐 + - `flex-end` 从侧轴结束的方向对齐 + - `baseline` 基线 默认同flex-start + - `center` 中间对齐 + - `stretch` 拉伸 + + +## 相关链接 +### flex 相关的推荐文章 + +- flex 效果在线演示： + +- CSS3 Flexbox 布局完全指南： + +- [后盾人 flex 相关的教程](http://houdunren.gitee.io/note/css/10%20%E5%BC%B9%E6%80%A7%E5%B8%83%E5%B1%80.html) -- Gitee