From 4c59b7df4cda20b7f961e9de7ec643b6d1ff9215 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Mon, 11 Nov 2024 08:05:45 +0800
Subject: [PATCH] =?UTF-8?q?flex=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...20241104--flex\345\270\203\345\261\200.md" | 522 ++++++++++++++++++
 1 file changed, 522 insertions(+)
 create mode 100644 "\346\235\216\345\205\264\351\234\262/20241104--flex\345\270\203\345\261\200.md"

diff --git "a/\346\235\216\345\205\264\351\234\262/20241104--flex\345\270\203\345\261\200.md" "b/\346\235\216\345\205\264\351\234\262/20241104--flex\345\270\203\345\261\200.md"
new file mode 100644
index 0000000..0b95d96
--- /dev/null
+++ "b/\346\235\216\345\205\264\351\234\262/20241104--flex\345\270\203\345\261\200.md"
@@ -0,0 +1,522 @@
+# 弹性盒子
+## 声明定义
+使用 `display:flex` 或 `display:inline-flex` 声明一个**父容器**为弹性盒子。此时，这个父容器里的子元素们，会遵循弹性布局。一般用`display：flex`属性。
+
+## flex-direction属性
+`flex-direction`：用于设置盒子中**子元素**的排列方向。
+
+它的属性值可以有：
+```
+row:从左到右水平排列子元素
+column：从上到下垂直排列子元素
+row-reverse：从右向左排列子元素
+column-reverse：从下到上垂直排列子元素
+```
+<font color="#fff000">备注</font>：如果我们不给父容器写`flex-direction`这个属性，那么，子元素默认就是从左到右排列的。
+
+## flex-wrap属性
+`flex-wrap`：控制子元素溢出时的换行处理。
+## justify-content 属性
+`justify-content`：控制子元素在主轴上的排列方式。
+
+# 弹性元素
+## 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` 拉伸
+```
+# 作业
+```html
+<style>
+    * {
+        margin: 0;
+        padding: 0;
+    }
+
+    .box {
+        width: 750px;
+        height: 1200px;
+    }
+
+    .head {
+        width: 750px;
+        height: 70px;
+        padding: 10px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        background-color: white;
+        position: fixed;
+        top: 0px;
+    }
+
+    .h1 {
+        width: 610px;
+        height: 35px;
+        border-radius: 7px;
+        border: 1px solid gray;
+        display: flex;
+        box-shadow: 5px 5px 3px -2px gray;
+    }
+
+    .ssb {
+        width: 40px;
+        height: 35px;
+        background: url(./imgs/xiecheng-sprite.png) no-repeat -112px -554px;
+    }
+
+    .wb {
+        color: gray;
+        align-content: center;
+    }
+
+    .h2 {
+        width: 70px;
+        height: 60px;
+        text-align: center;
+        color: #41a2db;
+    }
+
+    .h2>.img {
+        width: 70px;
+        height: 44px;
+        background: url(./imgs/xiecheng-sprite.png) no-repeat -107px -389px;
+    }
+
+    .tp {
+        background-image: url(./imgs/xiecheng-focus.jpg);
+        width: 750px;
+        height: 150px;
+        margin-top: 90px;
+    }
+
+    .play {
+        width: 750px;
+        height: 130px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+    }
+
+    .yp {
+        width: 140px;
+        height: 110px;
+        color: #484848;
+        text-align: center;
+        align-content: center;
+        font-weight: bold;
+        font-size: 25px;
+    }
+
+    .yy {
+        width: 64px;
+        height: 64px;
+        display: inline-block;
+    }
+
+    .y1 {
+        background: url(./imgs/xiecheng-localnav_bg.png) no-repeat 0px 0px;
+    }
+
+    .y2 {
+        background: url(./imgs/xiecheng-localnav_bg.png) no-repeat 0px -64px;
+    }
+
+    .y3 {
+        background: url(./imgs/xiecheng-localnav_bg.png) no-repeat 0px -128px;
+    }
+
+    .y4 {
+        background: url(./imgs/xiecheng-localnav_bg.png) no-repeat 0px -192px;
+    }
+
+    .y5 {
+        background: url(./imgs/xiecheng-localnav_bg.png) no-repeat 0px -256px;
+    }
+
+    .hotel {
+        width: 750px;
+        height: 530px;
+        justify-content: space-around;
+        display: flex;
+        flex-direction: column;
+    }
+
+    [class^='ht'] {
+        width: 750px;
+        height: 170px;
+        border: 1px solid white;
+        display: flex;
+        justify-content: space-around;
+        text-align: center;
+        color: white;
+        font-size: 30px;
+    }
+
+    .z {
+        width: 240px;
+        height: 170px;
+        background: url(./imgs/xiecheng-hotel.png) no-repeat;
+        background-position: bottom;
+        margin-top: 20px;
+    }
+
+    .hw,
+    .tj {
+        width: 240px;
+        height: 85px;
+        border: 1px solid white;
+        border-right: 0px;
+        line-height: 85px;
+    }
+
+    .ht1 {
+        background-image: linear-gradient(to right, #fa5b56, #fb954e);
+    }
+
+    .ht2 {
+        background-image: linear-gradient(to right, #4c93ec, #53baed);
+    }
+
+    .ht3 {
+        background-image: linear-gradient(to right, #3ac4a6, #69d35f);
+    }
+
+    .tf {
+        width: 750px;
+        height: 230px;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-around;
+    }
+
+    .tf1 {
+        width: 140px;
+        height: 80px;
+        line-height: 185px;
+        font-size: 30px;
+        font-weight: bold;
+        text-align: center;
+        background: url(./imgs/wf.png) no-repeat 50px 30px;
+    }
+
+    .hd {
+        width: 750px;
+        height: 120px;
+        border: 1px solid gray;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-left: 0px;
+        border-right: 0px;
+    }
+
+    .d1 {
+        width: 180px;
+        height: 50px;
+        background: url(./imgs/xiecheng-hot.png) no-repeat 18px -30px;
+    }
+
+    .d2 {
+        width: 270px;
+        height: 80px;
+        color: white;
+        background-color: #f95a8e;
+        font-size: 35px;
+        line-height: 80px;
+        border-radius: 40px;
+        text-align: center;
+    }
+
+    .gift {
+        width: 750px;
+        height: 610px;
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+    .g1,
+    .g2 {
+        width: 373px;
+        height: 268px;
+        border: 1px solid #d3d0d0;
+    }
+
+    [class^='f'] {
+        width: 373px;
+        height: 168px;
+        border: 1px solid #d3d0d0;
+    }
+
+    .g1 {
+        background: url(./imgs/xiecheng-pic1.jpg) no-repeat;
+    }
+
+    .g2 {
+        background: url(./imgs/xiecheng-pic2.jpg) no-repeat;
+    }
+
+    .f3 {
+        background: url(./imgs/xiecheng-pic3.jpg) no-repeat;
+    }
+
+    .f4 {
+        background: url(./imgs/xiecheng-pic4.jpg) no-repeat;
+    }
+
+    .f5 {
+        background: url(./imgs/xiecheng-pic5.jpg) no-repeat;
+    }
+
+    .f6 {
+        background: url(./imgs/xiecheng-pic6.jpg) no-repeat;
+    }
+</style>
+```
+
+## 圣杯
+```css
+*{
+    margin: 0;
+    padding: 0;
+}
+.box{
+    width: 100%;
+    height: 100%;
+    color: white;
+    text-align: center;
+}
+.tt{
+    width: 100%;
+    height: 50px;
+    background-color: rgb(223, 223, 187);
+    align-content: center;
+}
+.mm{
+    width: 100%;
+    height: 600px;
+    display: flex;
+}
+.left{
+    width: 100px;
+    height: 600px;
+    background-color: forestgreen;
+}
+.center{
+    width: calc(100% - 80px);
+    height: 600px;
+    background-color: rgb(221, 232, 237);
+}
+.right{
+    width: 100px;
+    height: 600px;
+    background-color: rgb(147, 67, 223);
+}
+.dd{
+    width: 100%;
+    height: 50px;
+    background-color: rgb(24, 20, 20);
+    align-content: center;
+}
+@media screen and (max-width:500px){
+    .mm{
+        flex-direction: column;
+        align-items: baseline;
+    }
+    .center{
+        width: 100%;
+        order: 1;
+    }
+    .left{
+        width: 100%;
+        order: 2;
+    }
+    .right{
+        width: 100%;
+        order: 3;
+    }
+}
+```
+## 十个盒子
+```css
+.box {
+    width: 1000px;
+    display: flex;
+    flex-wrap: nowrap;
+}
+
+[class^='d'] {
+    width: 100px;
+    height: 100px;
+}
+
+.d1 {
+    background-color: #ee1010;
+}
+
+.d2 {
+    background-color: #eeea10;
+}
+
+.d3 {
+    background-color: #86ee10;
+}
+
+.d4 {
+    background-color: #10ee91;
+}
+
+.d5 {
+    background-color: #10eed0;
+}
+
+.d6 {
+    background-color: #1056ee;
+}
+
+.d7 {
+    background-color: #7810ee;
+}
+
+.d8 {
+    background-color: #e710ee;
+}
+
+.d9 {
+    background-color: #940855;
+}
+
+.d10 {
+    background-color: #4b9c09;
+}
+
+@media (max-width:500px) {
+    .box {
+        flex-direction: column;
+    }
+
+    .box div:nth-child(n+6) {
+        display: none;
+    }
+}
+```
+
+## 骰子
+```css
+*{
+    margin: 0;
+    padding: 0;
+}
+.box{
+    width: 1000px;
+    height: 100px;
+    display: flex;
+}
+[class^='d']{
+    width: 100px;
+    height: 100px;
+    border: 1px solid #eb3223;
+    margin-left: 10px;
+    display: flex;
+}
+[class^='t']{
+    width: 15px;
+    height: 15px;
+    background-color: black;
+    border-radius: 50%;
+}
+.d1{
+    justify-content: center;
+    align-items: center;
+}
+.d2{
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+}
+.d3{
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+}
+.t31{
+    margin-right: 65px;
+}
+.t33{
+    margin-left: 65px;
+}
+.d4{
+    justify-content: space-around;
+}
+.h40{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+}
+.d5{
+    justify-content: space-around;
+    align-items: center;
+}
+.t53{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.h50{
+    height: 105px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+}
+.d6{
+    justify-content: space-around;
+}
+.h60{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+}
+.d7{
+    justify-content: space-around;
+    flex-direction: column;
+}
+.h70{
+    display: flex;
+    justify-content: space-around;
+}
+.d8{
+    justify-content: space-around;
+    flex-direction: column;
+}
+.h80{
+    display: flex;
+    justify-content: space-between;
+    margin: 10px;
+}
+.h90{
+    display: flex;
+    justify-content: space-around;
+}
+.d9{
+    justify-content: space-around;
+    flex-direction: column;
+}
+```
-- 
Gitee