flex使用方法 css布局超简单~

锐明清风

已于 2025-01-10 11:13:06 修改

阅读量350

点赞数 9

文章标签： css 前端

于 2025-01-10 11:12:41 首次发布

本文链接：https://blog.youkuaiyun.com/coder184/article/details/145009322

版权

文章目录

前言
一、flex是什么
二、为什么需要
三、如何使用
四、深入讨论
总结

前言

先体验基础用法，再深入

提示：以下是本篇文章正文内容，下面案例可供参考

一、flex是什么

flex是一种布局，也被称为“盒模型”；换言之，flex是解决布局的手段。

二、为什么需要

使3个a元素，排列在同一行，元素之间间隔一致，与父容器两侧间隔一致；
上述是一个布局要求；
用传统方式，display+margin+padding等等，还要考虑自身宽高，border等等；
而使用flex只需要2个简单配置；

显然，传统方式规范，但繁琐；
flex，更加个性化，目的性更强，更简易；最重要的是，它亦能完美实现！

这是我们使用flex的目的和必要性；
所以请记住：使用flex作为主要布局方式，使用传统布局（display+position+float等）作为补充方式；

三、如何使用

说明：
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。
它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

三个步骤体验全过程（你会发现flex布局真的很easy）：
1.声明flex容器；
	display: flex;
2.使用容器属性；
	justify-content: space-round
3.使用项目属性；
	align-self: center

以下是标准示范：
flex1.htm

<!DOCTYPE html>
<html>

<head>
    <title>Flex container</title>
    <link rel="stylesheet" href="flex_style.css">
</head>

<body>
    <div id="container">
        <div id="item">1</div>
        <div id="item">2</div>
    </div>
</body>

</html>

flex_style.css

#container {
    /* 基础 */
    border: 1px solid black;
    height: 300px;
    width: 300px;
    /* 关键 */
    display: flex;
    justify-content: space-around;
}

#item {
    /* 基础 */
    height: 100px;
    width: 100px;
    border: 1px solid red;
    /* 关键 */
    align-self: center;

    /* 额外 */
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: center; */
}

div {
    border: 0;
}

在这里插入图片描述

四、深入讨论

1.横轴、纵轴方向；
	横轴即从左到右的方向，纵轴即从上到下的方向；
	故而，flex容器中，默认从左上角开始排列；
2.容器属性（只介绍2个）；
    justify-content: 调整容器内项目，在横轴上排列的起始位置；
    align-items: 调整容器内项目，在纵轴上排列的起始位置；
3.项目属性（只介绍2个）；
    align-self：调整自身，在纵轴上排列的起始位置；
	flex：调整自身，在排列中所占比例，默认为1，与其他项目均分；

总结

1.请完整看完本篇内容；
2.将本篇中两个示例代码，在VScode中重现；
3.感受效果与本篇中相关说明；
4.记住，横轴即左右；纵轴即上下；（这是默认）；
5.在此基础上，再深入；
6.将示例代码中的注释部分打开，查看变化；
7.VScode请使用Live Preview插件，方便预览；