css笔记(八)弹性布局 更好的适应移动端 实战

弹性盒子布局

加在父盒子身上的属性

声明加到父盒子身上 display:flex;
默认在主轴方向是 水平方向 然后左对齐

1.主轴上的对齐方式 justify-content

属性	含义
flex-start	左对齐
flex-end	右对齐
center	居中
space-bettween	两端对齐，中间间距等分
space-around	两端的间距是中间的一半
space-evenly	每个子项左右两侧间距等分

2.设置主轴方向 flex-direction

属性	含义
row	默认的水平
column	垂直
row-reverse	起始和末尾端反一下
column-reverse	起始和末尾端反一下

3.设置交叉轴对齐方式 align-items

属性	含义
flex-start	起始位置
flex-end	结束位置
center	居中对齐
baseline	基线对齐
stretch	延伸占满默认

4.换行 flex-wrap

属性	含义
wrap	换行
no-wrap	不换行 会收缩
wrap-revserse	行上下颠倒

5.复合属性 flex-flow

是flex-direction flex-wrap 的 复合写法

加在子元素身上的属性

1.order属性

排序的属性
order:N

2.flex占比属性

属性	含义
flex-shrink	当子项和大于父盒子的宽度会根据比例来收缩 可以设置成 0 默认为1
flex-grow	子项宽度和小于父盒子宽度 会有 留白 可以设置 按照比例占据空白空间 默认是0 也就是不占据
flex-basis	设置 子项宽度 会覆盖 掉width
flex	复合属性 flex(增长 缩减 基础)

实战

上面没看太明白也没什么关系

来看看下面的 案例

实战京东 移动端 flex布局

这就是官网提供的页面

今天就来 仿照这个 练习 flex布局

        <!-- 首先需要一个 大盒子 容器 -->
        <div class="box">
                <!-- 可以使用 无序列表 -->
                <ul>
                        <li>
                                <!-- 每个里面有一张图 一个 p  先写两个看一下效果-->
                                <img src="./e2bcc411170524f0.png.webp" alt="">
                                <p>京东超市</p>
                        </li>
                        <li>
                                <img src="./e2bcc411170524f0.png.webp" alt="">
                                <p>京东超市</p>
                        </li>
                </ul>
        </div>

大概就是这个死样子了 文字 图对齐可以使用 text-align:center;实现 在来 多复制几个

按照传统布局的 方案 那就是要 浮动 然后 在清浮动

然后 给 ul 设置成 弹性盒子

                ul {
                        list-style: none;
                        display: flex;
                }

在来看一下效果

哦侯 直接并排

设置主轴参数看一下效果

justify-content: flex-start; (默认效果就是上面的那个样子)

justify-content: flex-end; 设置 结束 对齐

justify-content: center; 剧中对齐

justify-content: space-between;两端对齐

justify-content: space-around;两端的间距是中间的一半

justify-content: space-evenly; 均分

这样子 第一行 不就 ok 了吗

然后第二行 我们弄一个溢出 换行

flex-wrap: wrap;

                ul {
                        list-style: none;
                        display: flex;
                        justify-content: space-evenly;
                        flex-wrap: wrap;
                }

在给 每个 li 标签设置 一下 宽度 一行 放5 个 那就是 一个 20%

               li {
                       text-align: center;
                       width: 20%;
               }

两排 就 正好 不过 图片看有点大 上下间距太小 字体 太大

这些调起来就比较方便了

写给看到最后的你

朋友，感谢你看到了最后，新手报道，技术不成熟的地方请多多指点，感谢！

公众号：Linux下撸python
期待和你再次相遇
愿你学的愉快