DaZeng：Flex的使用及相关问题

最新推荐文章于 2024-07-25 08:14:42 发布

Da Zeng

最新推荐文章于 2024-07-25 08:14:42 发布

阅读量247

点赞数 1

分类专栏： CSS 文章标签： css html 前端

本文链接：https://blog.csdn.net/Z269571627/article/details/118938724

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Flex的使用及相关问题

Flex的使用
flex内容溢出
- 设置width：0
- 设置overflow

Flex的使用

yyds：Flex 布局教程——阮一峰

flex-box属性设置：

flex-direction:row → | row-reverse ← | column ↓ | column-reverse ↑ ; 项目的排列方向

flex-wrap:nowrap | wrap | wrap-reverse 换行的内容上下交换;

flex-flow: <flex-direction> || <flex-wrap>;

justify-content: flex-start | flex-end | center | space-between | space-around; 横向(主)轴对齐方式

align-items:flex-start | flex-end | center | baseline | stretch 顶部底部拉满; 纵向轴对齐方式

align-content: flex-start | flex-end | center | space-between | space-around | stretch; 多行内容在纵向轴对齐方式

flex-item属性设置：

order:0 数值越小排列越靠前

flex-grow:0 项目放大空间，如果所有的项目都为1，平分剩余空间，如果有一个为2则所占空间为1的一倍。

flex-shrink:1 项目空间不足时，所有项目等比例缩小，如其中一个设置为0，设置为0的不缩小

flex-basis: <length> | auto; /* default auto */

flex:none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]
auto （1 1 auto）
none （0 0 auto）
1 （1 1 0）

align-self: auto | flex-start | flex-end | center | baseline | stretch; 单个项目的纵向对齐方式覆盖align-items，auto没有父元素等同于stretch

flex内容溢出

在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
            .demo{
                display: flex;
                width: 400px;
                border: 2px solid red;
                height: 200px;
            }
            .div1{
                display: inline-block;
                vertical-align: top;
                border: 1px solid green;
            }
            .div-flex{
                flex: 1;
            }
            .div1 .test{
                width: 300px;
                border: 1px solid blue;
            }
        </style>
    </head>
    <body>
        <div class="demo">
            <div class="div1 div-flex">
                <div class="test">我是方块</div>
            </div>
            <div class="div1">22222222222222</div>
            <div class="div1">33333</div>
            <div class="div1">44</div>
            <div class="div1">5</div>
        </div>
    </body>
    
</html>

设置width：0

在这里插入图片描述

设置overflow

在这里插入图片描述

Da Zeng

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
6
评论
DaZeng：Flex的使用及相关问题

Flex的使用及相关问题Flex的使用flex内容溢出设置width：0设置overflowFlex的使用yyds：Flex 布局教程——阮一峰flex-box属性设置：flex-direction:row → | row-reverse ← | column ↓ | column-reverse ↑ ; 项目的排列方向flex-wrap:nowrap | wrap | wrap-reverse 换行的内容上下交换;flex-flow: <flex-direction> |
复制链接

扫一扫