移动手机端布局：flex

最新推荐文章于 2021-08-09 01:41:24 发布

特别的琪

最新推荐文章于 2021-08-09 01:41:24 发布

阅读量185

点赞数

文章标签： css html css3 less flex

本文链接：https://blog.csdn.net/Yangjiaqi111/article/details/113917504

版权

本文探讨了移动手机端布局中的CSS Flex布局，包括父级属性、子级属性的常见用法，以及如何结合媒体查询进行响应式设计。同时提到了使用rem进行布局和实现适配方案。

摘要由CSDN通过智能技术生成

体验flex布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <style>
        div {
   
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
            /* flex-direction: column; */
            justify-content: center;
            align-items: center;
        }
        div span {
   
            width: 150px;
            height: 100px;
            background-color: palegoldenrod;
            margin-right: 5px;
            flex: 1;
        }
    </style>
</head>
<body>
    <!-- flex弹性布局：操作方便 用于移动端-->
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
    <!-- 1.为父盒子设置flex之后，子元素的float clear垂直居中将失效 
    2.给父盒子flex属性 来控制子盒子的位置和排列方式-->
</body>
</html>

常见的父级属性

<!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>Document</title>
</head>
<body>
    <!-- 
        给父级添加flex属性
        1、flex-direction 设置主轴的方向 
        主轴：x 侧轴：y
        row 从左到右 默认
        row-reverse 从右到左
        column 从上到下
        column-reverse 从下到上
        2、justify-content 设置主轴上的子元素的排列方式 在此之间先确定主轴
        flex-start 默认值 从头部开始
        flex-end  从尾部开始
        center 居中对齐
        space-around 平分剩余空间
        **space-between  先两边贴边 再平分剩余空间** 
        3、flex-wrap 设置子元素是否换行
        默认是一行显示的 如果装不开 会缩小子元素的宽度 
        nowrap 不换行
        wrap 另起一行显示 
        4、align-items 设置侧轴上的子元素排列方式（单行） 在子元素为单行时候使用

最低0.47元/天解锁文章

特别的琪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动手机端布局：flex

体验flex布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Document</title> <style> div { display:
复制链接

扫一扫