CSS之(移动端)flex布局

阿斯乐Code

已于 2023-05-23 21:02:32 修改

阅读量1k

点赞数

分类专栏： css 文章标签： css css3 html

于 2022-07-10 12:00:52 首次发布

本文链接：https://blog.csdn.net/weixin_45707229/article/details/125702795

版权

本文详细介绍了CSS中的弹性布局（Flex布局），包括视口概念、如何启用Flex布局、以及flex-direction、justify-content、flex-wrap、align-items等核心属性的用法和效果。内容覆盖了主轴和侧轴的设置，子元素的排列方式以及换行处理，帮助理解Flex布局在移动端的重要性。

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

了解视口

meta视口标签：

<meta name="viewport" content="width=device-width, 
                                    initial-scale=1.0,
                                    maximum-scale=1.0,
                                    minimum-sclae=1.0,
                                    user-scalable=no" >

属性	解释说明
width	宽度设置的是viewport宽度，可以设置device-width特殊值
initial-scale	初始缩放比，大于0的数字
maximum-scale	最大缩放比，大于0的数字
minimum-scale	最小缩放比，大于0的数字

在这里插入图片描述

弹性布局

对于flex，PC端浏览器支持情况较差。IE11或更低版本，不支持或部分支持，不考虑兼容性问题的pc端页面布局可以使用flex

任何一个容器都能指定为flex布局

父盒子设置flex布局后，子元素的 float、clear、vertical-align 属性将失效

flex布局常见的属性

flex-direction —— 设置主轴方向
justify-content —— 设置主轴上的子元素排列方式
flex-wrap —— 设置子元素是否换行
align-content —— 设置侧轴上的子元素的排列方式（多行，有换行情况）
align-items —— 设置侧轴上的子元素的排列方式（单行）
flex-flow —— 复合属性，对于同时设置flex-direction和flex-wrap

flex-direction

设置主轴方向
默认主轴是x轴，水平向右。默认侧轴是y轴，垂直向下

flex-direction: row —— 设置主轴x轴，水平向右，子元素从左到右排列

flex-direction: row-reserve —— 设置主轴x轴的反向，水平向左，子元素从右到左排列

flex-direction: column—— 设置主轴y轴，垂直向下，子元素从上到下排列

flex-direction: column-reserve —— 设置主轴y轴，垂直向上，子元素从下到上排列

确定主轴之后，侧轴就是另一个轴，子元素跟随主轴排列

<style>
		div{
     
            display: flex;
            width: 60%;
            height: 400px;
            background-color: pink;
            flex-direction: column;	/* 设置主轴为y轴，方向垂直向下 */