Flex布局—固定定位+流式布局—主轴对齐—侧轴对齐—伸缩比

原创

已于 2022-07-26 09:30:05 修改 · 1.6k 阅读

标签

#css #html #css3

收录于

于 2022-07-25 20:17:17 首次发布

本文介绍了PC端和移动端网页布局的差异，重点讲解了Flex布局，包括其基础概念、主轴对齐方式、侧轴对齐方式、伸缩比的设置、主轴方向的更改以及解决弹性盒子换行问题的方法，旨在帮助开发者更灵活、高效地进行网页布局设计。

一.PC端和移动端的不同

PC端网页和移动端网页的有什么不同？
PC屏幕大，网页固定版心
手机屏幕小，网页宽度多数为100%

   视口标签
    <!-- 可以控制页面相同，保证上下相同 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

在这里插入图片描述

二.固定定位+流式布局

固定定位+流式或百分比布局写法宽度百分比，高度固定。
在这里插入图片描述

代码块
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }   
        li {
            list-style: none;
        }
        
        .toolbar {
            /* 固定定位是相对于整个浏览器页面，也就是最外面的区域 */
            position: fixed;
            left: 0;
            bottom: 0;
            /* 下面这样写的就是 百分比布局  流式布局 */
            width: 100%;
            height: 50px;

            background-color: p