【Html】23 - flex弹性布局

最新推荐文章于 2024-01-17 10:31:53 发布

郑SaScha

最新推荐文章于 2024-01-17 10:31:53 发布

阅读量210

点赞数

分类专栏： Html+CSS入门学习记录

本文链接：https://blog.csdn.net/m0_53493562/article/details/118299299

版权

本文详细介绍了Flex布局，包括其应用场景、核心理念和如何布局。主要讨论了flex容器的主轴和交叉轴，以及相关属性如`flex-direction`、`flex-wrap`、`justify-content`、`align-items`等，同时讲解了子元素的`order`、`flex-grow`、`flex-shrink`和`flex-basis`属性，帮助理解如何控制子元素在容器中的排列和大小调整。

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

flex弹性布局

flex（flexible box）弹性盒子

使用场景: 移动端布局；

核心理念: 父元素控制子元素的布局；

如何布局: 方向(元素的排列方向,换行方向)；

任何一个盒子都可以指定为flex布局
- 父级设置flex 布局以后，子元素的float、clear和vertical-align属性将失效。

display：flex的元素，称为flex容器（flex container）；

它的所有子元素称为容器的项目（flex item）

<!--父元素-->
<ul>
    <!--子元素-->
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>