css弹性盒模型详解----flex-flow

最新推荐文章于 2023-05-08 13:55:34 发布

旧城空巷旧心

最新推荐文章于 2023-05-08 13:55:34 发布

阅读量366

点赞数

分类专栏： css 文章标签：弹性盒模型 css3 flex

本文链接：https://blog.csdn.net/qq_34451947/article/details/103049819

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本篇文章主要介绍 flex-flow

一次介绍两个知识点是自己前期没有捋顺关系  flex-flow应该和上两篇文章一起介绍的
	但是后介绍也有后介绍的好处，通过前两篇文章我相信你对 flex-direction属性和flex-wrap属性有了很清晰的了解，而flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .flex-box{
            width: 1000px;
            margin: 0 auto;
            background-color: #ccc;
            display: flex;
            flex-flow: row wrap;   
        }
       
        .box{
            width: 400px;
            height: 100px;
            background-color: red;
            color: blue;
            margin-right: 50px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="flex-box">
        <div class="box">1111111</div>
        <div class="box">222222</div>
        <div class="box">3333</div>
    </div>
</body>
</html>

从代码可以得知 flow属性接收两个属性 第一个属性是行还是列的排序 第二个是是否换行

效果演示入下：

效果演示如下

旧城空巷旧心

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css弹性盒模型详解----flex-flow

本篇文章主要介绍 flex-flow一次介绍两个知识点是自己前期没有捋顺关系 flex-flow应该和上两篇文章一起介绍的但是后介绍也有后介绍的好处，通过前两篇文章我相信你对 flex-direction属性和flex-wrap属性有了很清晰的了解，而flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。<!DO...
复制链接

扫一扫