From 1858c7b60a9d286c5d608abdb75dca5f37e8035c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=96=B9=E5=87=A4=E4=B8=B9?= <14092403+fang-fengdan@user.noreply.gitee.com> Date: Sun, 10 Nov 2024 19:20:30 +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(\345\270\203\345\261\200).md" | 1204 +++++++++++++++++ 1 file changed, 1204 insertions(+) create mode 100644 "\346\226\271\345\207\244\344\270\271/20241104(\345\270\203\345\261\200).md" diff --git "a/\346\226\271\345\207\244\344\270\271/20241104(\345\270\203\345\261\200).md" "b/\346\226\271\345\207\244\344\270\271/20241104(\345\270\203\345\261\200).md" new file mode 100644 index 0000000..ec0f1b5 --- /dev/null +++ "b/\346\226\271\345\207\244\344\270\271/20241104(\345\270\203\345\261\200).md" @@ -0,0 +1,1204 @@ + + +### flex-direction 属性 +flex-direction:用于设置盒子中子元素的排列方向 + +属性值可以是： +1. row 从左到右水平排列子元素 +2. row-reverse 从右到左排水平列子元素 +3. column 从上到下垂直排列子元素 +4. column-reverse 从下到上垂直排列子元素 + +注意：如果不给父级容器写flex-direction这个属性，那么子元素默认从左向右排列。 + +### flex-wrap属性 +flex-wrap:控制元素溢出时的换行处理 + +### justify-content属性 +justify-content ：控制子元素在主轴上的排列方式 + +### 弹性元素 +justify-content属性 + justify-content：flex-start:设置子元素在主轴上的对齐方式 +属性值可以是： +1. flex-start 从主轴的起点对齐（默认值） +2. flex-end： 从主轴的终点对齐 +3. center：居中对齐 +4. space-around:在父盒子里平分 +5. space-between:两端对齐平分 + +### align-items属性 +设置子元素在侧轴上的随其方式 +属性值可以是 +1. flex-start：从侧轴开始的方向对齐 +2. flex-end:从侧轴结束的方向对齐 +3. baseline:基线 默认同flex-start +4. center：中间对齐 +5. stretch：拉伸 + +### 布局练习 + +```html + + + + + + + Document + + + + +
+

+
+
+

+

+
+
+

+

+

+
+
+
+

+

+
+
+

+

+
+
+
+
+

+

+ +
+
+

+ +
+
+

+

+ +
+
+
+
+

+

+ +
+
+

+

+
+
+

+

+ +
+
+
+
+

+

+

+
+
+

+ +
+
+

+

+

+
+
+
+
+

+

+

+
+
+

+

+
+
+

+

+

+
+
+
+
+

+

+

+
+
+

+

+

+
+
+

+

+

+
+
+ + + + + + + + + + Document + + + + +
+ +
+
+
+
+
+
打开京东APP，购物更轻松
+
立即打开
+
+ + +
+
+
+
登录
+
+ + +
+ + +
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
京东超市
+
京东超市
+
京东超市
+
京东超市
+
京东超市
+
+
+
+
+
+
+
+
+
+
京东超市
+
京东超市
+
京东超市
+
京东超市
+
京东超市
+
+ +
+ + +
+
+
京东秒杀  18
+
+
更多秒杀
+
+
+
+
+
+
+
+
+
+
+
+
￥25
+
￥2568
+
￥28.8
+
￥19.7
+
￥420
+
￥42.9
+
+
+ + +
+
+
+
+ + +
+
首页
+
分类
+
惊喜
+
购物车
+
未登录
+
+
+ + + + + + + + + + Document + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
景点·玩乐
+
景点·玩乐
+
景点·玩乐
+
景点·玩乐
+
景点·玩乐
+
+
+
+
+
+
+
+
+
+
+
+
+
电话费
+
电话费
+
电话费
+
电话费
+
电话费
+
+
+
+
+
+
+
+
+
+
电话费
+
电话费
+
电话费
+
电话费
+
电话费
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + +``` + +### 效果展示 + +![](./pt/京东.png) +![](./pt/骰子.png) +![](./pt/携程.png) -- Gitee