前端开发-弹性盒子

最新推荐文章于 2024-04-09 15:38:48 发布

前端继承者

最新推荐文章于 2024-04-09 15:38:48 发布

阅读量138

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/qianduankaifawz/article/details/127375549

版权

弹性盒子是CSS3的一种新的布局模式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间操作方便，布局简单，移动端使用广泛PC端浏览器支持情况较差IE11或更低版本中，不支持或部分支持在盒模型中较为灵活弹性盒模型的内容包括：弹性容器、弹性子元素——项目原理：为父元素设置flex属性，控制子元素的位置及排列方式应用场景 : 移动端。

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

1、弹性盒子

1.1 什么是弹性盒子？

弹性盒子是CSS3的一种新的布局模式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间
- 操作方便，布局简单，移动端使用广泛
- PC端浏览器支持情况较差
- IE11或更低版本中，不支持或部分支持
- 在盒模型中较为灵活
弹性盒模型的内容包括：弹性容器、弹性子元素——项目
原理：为父元素设置flex属性，控制子元素的位置及排列方式
应用场景 : 移动端

1.2 设置弹性盒子——display属性

display: flex; 将对象作为弹性伸缩盒显示
display: inline-flex; 将对象作为内联块级弹性伸缩盒显示
注意：

将容器设置为flex布局之后，子元素中的float、clear、vertical-align属性都会失效

弹性子元素-类似于行内块元素，如果不设置宽高，由内容撑开；即使是行内元素也可以设置宽高

1.3 基本概念

flex容器、项目——弹性子元素
默认在容器中有两根轴线
- 默认主轴方向——x轴方向，水平向右（左侧为主轴起点，右侧为主轴终点）
- 默认交叉轴方向——y轴方向，水平向下（上方为交叉轴起点，下方交叉轴终点）
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

注意: 主轴不一定是x轴,还可以是y轴,有一边是主轴,另外一边就是侧轴

1.4 容器属性——添加弹性容器上

flex-direction属性：设置主轴的方向，子元素的排列方向

flex-direction: row; 默认值，主轴方向为水平方向，起点在左端
flex-direction: row-reverse; 主轴方向为水平方向，起点在右端
flex-direction: column; 主轴方向为垂直方向，起点在上方
flex-direction: column-reverse; 主轴方向垂直方向，起点在下方

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        .warp,
        .warp1 {
            width: 300px;
            height: 300px;
            background-color: aqua;
            /* 设置弹性盒*/
            display: flex;
        }

        div {
            width: 100px;
            height: 100px;
        }

        /* X为主轴 */
        .warp {
            flex-direction: row;
            flex-direction: row-reverse;
        }

        /* Y为主轴 */
        .warp1 {
            flex-direction: column;
            flex-direction: column-reverse;
        }

        .warp .box1 {
            background-color: red;
        }

        .warp .box2 {
            background-color: pink;
        }


        .warp1 .box1 {
            background-color: purple;
        }

        .warp1 .box2 {
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="warp">
        <

最低0.47元/天解锁文章

前端继承者

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端开发-弹性盒子

弹性盒子是CSS3的一种新的布局模式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间操作方便，布局简单，移动端使用广泛PC端浏览器支持情况较差IE11或更低版本中，不支持或部分支持在盒模型中较为灵活弹性盒模型的内容包括：弹性容器、弹性子元素——项目原理：为父元素设置flex属性，控制子元素的位置及排列方式应用场景 : 移动端。
复制链接

扫一扫