CSS3弹性盒子详解

最新推荐文章于 2024-04-03 17:39:36 发布

VIP文章软测小刘

最新推荐文章于 2024-04-03 17:39:36 发布

阅读量1.6k

点赞数 7

分类专栏： CSS 文章标签： CSS3 HTML 盒子模型

本文链接：https://blog.csdn.net/weixin_42145856/article/details/101620644

版权

什么是弹性盒子

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

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
在这里插入图片描述

主轴（main axis）是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end。
交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。
设置了 display: flex 的父元素（在本例中是
）被称之为 flex 容器（flex container）。
在 flex 容器中表现为柔性的盒子的元素被称之为 flex 项（flex item）（本例中是
元素。

列与行排列

弹性盒子提供了 flex-direction 这样一个属性，它可以指定主轴的方向（弹性盒子子类放置的地方）— 它默认值是 row，这使得它们在按你浏览器的默认语言方向排成一排

一、容器相关属性

1、flex-direction、flex-wrap和flex-flow

flex-flow(弹性流动配置)属性的值由flex-direction(弹性方向)和flex-wrap(弹性空间换行)属性组成，这一组值都是用于改变主轴设置的，而主轴的方向决定弹性布局的属性值对盒模型子元素在空间内的分配方式。flex-direction属性值默认为row(主轴方向为行的方向，水平方向)，其子元素的排列方向为延主轴从左至右排列，除此之外还可以取row-reverse、column(主轴方向为列的方向，垂直方向)和column-reverse，分别表示从右往左，从上至下和从下到上。flex-wrap决定盒子的主轴的数量，默认情况下，容器内容会按照一排布置在容器内(主轴只有一条)，当宽度不足时，所有的元素都将进行等比例压缩，container的flex-wrap默认值就是对应的nowrap不换行，换行为wrap(按照子元素宽度的占比出现多条主轴)，换行并反向排列为wrap-reverse。一个弹性盒子的默认排列方式如下所示：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .container{
     width: 302px; height: 302px; border:1px solid; display: flex;}
            .item{
    width: 100px; height: 100px}
            .item1-1{
     background:red;}
            .item1-2{
     background:orange;}
            .item1-3{
     background:yellow;}
            .item1-4{
     background:green;}
            .item1-5{
     background:cyan;}
            .item1-6{
     background:blue;}
        </style>
    </head>
    <body>
    <div class="container ">
        <div class="item item1-1">1</div>
        <div class="item item1-2">2</div

最低0.47元/天解锁文章

软测小刘

关注

7
点赞
踩
18

收藏

觉得还不错? 一键收藏
1
评论
CSS3弹性盒子详解

什么是弹性盒子弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。...
复制链接

扫一扫