检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
学习教程来源：慕课网-初识HTML(5)+CSS(3)-升级版 by：五月的夏天 弹性盒模型 - 弹性盒模型之flex属性 这一章节我们来学习flex弹性盒子模型，根据下面的例子来理解一下吧： 实现上图效果,我们需要输入以下代码: 上面的代码： 三个块元素设置大小以及背景色，
常见父项属性 flex-direction:设置主轴方向 (主轴是y轴，那侧轴就是x轴，反之一样) 默认x轴（从左到右）：row 从右到左：row-reverse y轴（从上到下）：column 从下到上：column-reverse justify-content:设置主轴上的子元素排列方式
🏆 作者简介，愚公搬代码 🏆《头衔》：华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，51CTO博客专家等。 🏆《近期荣誉》：2022年CSDN博客之星TOP2
✏️ 作者：大二计算机专业学生 ♉ 星座：金牛座 🏠 主页：查看更多文章 🏂 关键：flex 前端布局
背景 我身边一些非互联网技术从业的朋友，偶尔看我转发到朋友圈的文章，会表示出一定的兴趣。前段时间，有朋友问我公众号的问题，所以我来了灵感，准备写一个趣学前端系列，适用于零基础、新手前端或者想把编程当做兴趣培养的人。 学问必须合乎自己的兴趣,方可得益。 ——
介绍  flex布局的优点缺点以及布局原理   优点 1.优点在于容易操作，根据flex规则很容易达到某个布局效果。 2.集合了百分比布局和浮动的优点，可以具体设置宽度 也免于设置以及清除浮动，同样可以达到相同的效果。
使用flex布局的痛点 如果使用justify-content: space-between;让子元素两端对齐，自动分配中间间距，假设一行4个，如果每一行都是4的倍数那没任何问题，但如果最后一行是2、3个的时候就会出现下面的状况： 看一个简单的例子： /*
@TOC 前言 Counter容器组件：计数器组件，提供相应的增加或者减少的计数操作。 Flex容器组件：以弹性方式布局子组件的容器组件。 一、Counter 计数器组件，提供相应的增加或者减少的计数操作。 说明 该组件从API Version 7开始支持。后续版本如有新增内容
鲲鹏处理器 鲲鹏处理器是华为在2019年1月向业界发布的高性能数据中心处理器。 目的在于满足数据中心的多样性计算和绿色计算需求 ，具有高性能，高带宽，高集成度，高效能四大特点。 openEuler openEuler是华为自主研发的服务器操作系统
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
