Flex布局

最新推荐文章于 2024-08-18 22:21:01 发布

camellia小凡

最新推荐文章于 2024-08-18 22:21:01 发布

阅读量35

点赞数

文章标签： css

本文链接：https://blog.csdn.net/SYF2000516/article/details/133141660

版权

一、Flex布局的概念与基础概括

Flex布局又称弹性布局，它使用flexbox使得容器有了弹性，更加适应各种设备的不同宽度，而不必依赖于传统的块状布局和浮动定位。它是CSS3中新增的规范，常用于响应式设计和移动端开发中，目前主流浏览器均已支持。Flex布局不支持IE9及以下版本。

二、Flex布局中主要包含了以下五个概念：

1. 弹性容器（flex container）：采用Flex布局的外层容器。

2. 弹性项（flex item）：容器中的子元素。

3. 主轴（main axis）：弹性容器的水平或垂直方向。

4. 交叉轴（cross axis）：与主轴垂直的方向。

5. 对齐方式（align）：设置弹性项在弹性容器内的对齐方式。

三、示例、可去掉注释自行查看

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        /* flex布局  */
         display: flex;
        /* 起点排序 */
        /* justify-content: flex-start; */
        /* 终点排序 */
        /* justify-content: flex-end; */
        /* 居中 */
        /* justify-content: center; */

        /* 均匀分布在盒子中间 */
        /* justify-content: space-between; */
        /* 均匀分布在两侧 */
        /* justify-content: space-around; */
        /* 平均分布 */
        /* justify-content: space-evenly; */
        /* 弹性盒子在侧轴没有尺寸才能拉伸 */
        /* align-items: stretch; */
        /* 弹性盒子在侧轴没有尺寸才能拉伸 */
        /* align-items: center; */
        /* 终点开始排序 */
        /* align-items: flex-end; */
        /* 弹性盒子在侧轴没有尺寸才能拉伸 */
        /* align-items: flex-start */

        /* 修改主轴方向，垂直方向，侧轴自动变换到水平方向。 */
        /* flex-direction: column; */
        /* 主轴在垂直,视觉效果，垂直居中。 */
        /* justify-content: center; */
        /* 侧轴在水平，视觉效果,水平居中。 */
        /* align-items: center; */

        /* 不换行 */
        /* flex-wrap: nowrap; */
        /* 换行 */
        flex-wrap: wrap;
        /* 从终点开始依次排列。 */
        /* align-content: flex-end; */
        /* 从起点开始依次排列。 */
        /* align-content: flex-start; */
        /* 居中排列 */
        /* align-content: center; */
        /* 空间间距分布在盒子之间。 */
        /* align-content: space-between; */
        /* 空间间距分布在盒子两侧。 */
        /* align-content: space-around; */
        /*空间间距平均分在盒子里。 */
        /* align-content: space-evenly; */
        /* 弹性盒子占用父级盒字的份数 */
        /* flex: 1; */
        height: 800px;
        border: 1px solid #000;
      }
      .box div {
        margin: 10px;
        width: 200px;
        height: 100px;
        background-color: pink;
      }
    </style>
  </head>
  <div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
  </div>
  <body>
  </body>
</html>

camellia小凡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Flex布局

Flex布局又称弹性布局，它使用flexbox使得容器有了弹性，更加适应各种设备的不同宽度，而不必依赖于传统的块状布局和浮动定位。它是CSS3中新增的规范，常用于响应式设计和移动端开发中，目前主流浏览器均已支持。Flex布局不支持IE9及以下版本。1. 弹性容器（flex container）：采用Flex布局的外层容器。2. 弹性项（flex item）：容器中的子元素。3. 主轴（main axis）：弹性容器的水平或垂直方向。4. 交叉轴（cross axis）：与主轴垂直的方向。
复制链接

扫一扫