From a5bd894e78f55996b8201667d950160513cc3c60 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E6=AC=A2?= <3167389063@qq.com> Date: Thu, 7 Nov 2024 22:46:17 +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" | 338 ++++++++++++++++++ ...2\347\241\200\345\270\203\345\261\200.png" | Bin 0 -> 4242 bytes ...5\351\227\250\350\247\206\351\242\221.png" | Bin 0 -> 575433 bytes .../imgs/\351\252\260\345\255\220.png" | Bin 0 -> 16125 bytes 4 files changed, 338 insertions(+) create mode 100644 "\345\210\230\346\254\242/20241104--Flex\345\270\203\345\261\200.md" create mode 100644 "\345\210\230\346\254\242/imgs/\345\237\272\347\241\200\345\270\203\345\261\200.png" create mode 100644 "\345\210\230\346\254\242/imgs/\347\203\255\351\227\250\350\247\206\351\242\221.png" create mode 100644 "\345\210\230\346\254\242/imgs/\351\252\260\345\255\220.png" diff --git "a/\345\210\230\346\254\242/20241104--Flex\345\270\203\345\261\200.md" "b/\345\210\230\346\254\242/20241104--Flex\345\270\203\345\261\200.md" new file mode 100644 index 0000000..7161d65 --- /dev/null +++ "b/\345\210\230\346\254\242/20241104--Flex\345\270\203\345\261\200.md" @@ -0,0 +1,338 @@ +# Flex布局 +flex 布局的优势 + +1. flex 布局的**子元素不会脱离文档流**，很好地遵从了“流的特性”。 + +2. flex 是一种现代的布局方式，是 W3C 第一次提供真正用于布局的 CSS 规范。 flex 非常提供了丰富的属性，非常灵活，让布局的实现更佳多样化，且方便易用。 + + +## 弹性元素 +弹性盒子：指的是使用 display:flex 或 display:inline-flex 声明的父容器。 + + +## 子元素 +子元素/弹性元素：指的是父容器里面的子元素们（父容器被声明为 flex 盒子的情况下）。 + + + + +## flex-direction属性 + +用于设置盒子元素中子元素的排列方向 + +属性值： + ++ row 从左到右水平排列子元素（默认） ++ column 从上到下垂直排列子元素 ++ row-reverse 从右向左排列 ++ column-reverse 从下到上垂直排列子元素 + +## flex-wrap属性 +控制子元素溢出时的换行处理 + +## justify-content属性 +控制子元素在主轴上的排列方式 + +## 弹性元素 +### justify-content属性 +设置子元素在主轴上的对齐方式 + +属性值： + ++ flex-start 从主轴的起点对齐（默认值） ++ flex-end 从主轴的终点对齐 ++ center 居中对齐 ++ space-around 在父盒子里平分 ++ space-between 两端对齐 平分 + +### align-items属性 +设置子元素在侧轴上的对齐方式 + +属性值： + ++ flex-start 从侧轴开始的方向对齐 ++ flex-end 从侧轴结束的方向对齐 ++ baseline 基线 默认同flex-start ++ center 中间对齐 ++ stretch 拉伸 + +## 响应式布局 +1. flex +2. grid +3. 列布局 +4. 媒体查询 + +## 媒体查询 +根据设备的类型或特定特征和参数（例如屏幕分辨率和浏览器窗口宽度）来应用不同的样式 + +通常通过@media和@import at-rules在CSS中使用，或者通过HTML元素的media=属性来指定特定的媒体类型 + +```css +/* 应用于屏幕的样式 */ +@media screen { +/* 样式代码 */ +} +``` + +例如 +```css +/* 当屏幕宽度小于等于600px时应用此样式 */ +@media screen and (max-width: 600px){ + body{ + background-color: pink; + } +} +/* 当屏幕宽度大于600px时应用此样式 */ +@media screen and (min-width: 601px){ + body{ + background-color: red; + } +} +``` + + +# 作业 +## 基本布局 +### 效果图 +![图片](./imgs/基础布局.png) + +### 代码 +```css +