(二)弹性布局Flex

最新推荐文章于 2024-08-17 21:15:18 发布

凉不乐

最新推荐文章于 2024-08-17 21:15:18 发布

阅读量672

点赞数 2

分类专栏：前端日常学习笔记文章标签： css3 html5

本文链接：https://blog.csdn.net/qq_41027461/article/details/104564196

版权

本文介绍了CSS3的弹性布局Flex，包括在父元素上设置`display: flex;`开启弹性布局，`flex-direction`定义主轴方向，`flex-wrap`控制换行，`justify-content`和`align-items`调整子元素在主轴和交叉轴上的对齐方式，以及子元素的相关属性如`order`、`flex-grow`、`flex-shrink`和`flex-basis`等。弹性布局适用于一维布局，能灵活处理元素的排列和空间分配。

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

弹性布局Flex

本周在逆战班学习了布局方面的知识，作为前端开发布局是最关键的，此文章用来写自己对弹性布局知识点的理解，和想法，

弹性布局分为两部分父元素和子元素，在父元素上设置弹性布局而控制子元素

两个基本方向：主轴-在弹性布局中，我们通过属性规定水平/垂直方向为主轴。
交叉轴-与主轴垂直的另外一个方向为交叉轴。

没有使用弹性布局之前

<!DOCTYPE html>    
<html lang="en">   
<head> 
    <meta charset="UTF-8">  
    <title>Document</title>
    <style>
        *{
   margin: 0px; padding: 0px;}
        .main{
   width: 500