flex弹性布局

最新推荐文章于 2023-11-10 10:29:10 发布
最新推荐文章于 2023-11-10 10:29:10 发布
阅读量356 收藏
点赞数 2
分类专栏： HTML 文章标签： flex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43778556/article/details/106735202
版权

在这里插入图片描述
flex-direction: column;

在这里插入图片描述
justify-content: space-around;

在这里插入图片描述
align-items: center;

父级：

	display: flex; 如果用了弹性布局，子元素不需要浮动float

      父级身上的其他属性：

      flex-direction: column;子元素排列方式（纵向排列或横向排列）
          column纵向排列
          column-reverse纵向翻转排列
          row横向排列
          row-reverse横向反转排列

      justify-content: center;子元素水平排列方式
          center居中
          pace-between两端对齐
          space-around拉手平分
          flex-start居左
          flex-end居右

      align-items: center;子元素垂直排列
          center居中
          flex-start顶部
          flex-end底部

      flex-wrap: nowrap;子元素是否在一行显示
          nowrap不换行
          wrap换行

      align-content: center;子元素多行的时候，垂直排列
          center居中
          flex-start顶部
          flex-end底部
      
      flex-flow: <flex-direction> <flex-wrap>;

子元素：

  flex: 1000;（系数） 子元素在划分父元素宽度时，先刨除固定宽度

  flex-grow: 1;定义子元素放大比例

  align-self: flex-start;
  其实就是用来覆盖父级align-items垂直排列(父级必须使用align-items属性否则align-self无效)

  order: 1;规定子元素顺序，排序，
  数值越小，越靠前，默认值为0

<!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;
            list-style: none;
        }

        /* 父级：
            display: flex;
            如果用了弹性布局，子元素不需要浮动float


            父级身上的其他属性：

            flex-direction: column;子元素排列方式（纵向排列或横向排列）
            column纵向排列
            column-reverse纵向翻转排列
            row横向排列
            row-reverse横向反转排列

            justify-content: center;子元素水平排列方式
            center居中
            pace-between两端对齐
            space-around拉手平分
            flex-start居左
            flex-end居右

            align-items: center;子元素垂直排列
            center居中
            flex-start顶部
            flex-end底部

            
        */

        .box {
            width: 500px;
            height: 500px;
            border: 1px solid #000000;
            margin: 20px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-direction: column;
        }

        .div {
            width: 100px;
            height: 100px;
            background-color: red;
            font-size: 40px;
            color: #ffffff;
            text-align: center;
            line-height: 100px;

        }
    </style>
</head>

<body>
    <div class="box">
        <div class="div">1</div>
        <div class="div">2</div>
    </div>
</body>

</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;
            list-style: none;
        }

        /* 父级：
            display: flex;
            如果用了弹性布局，子元素不需要浮动float


            父级身上的其他属性：

            flex-direction: column;子元素排列方式（纵向排列或横向排列）
            column纵向排列
            column-reverse纵向翻转排列
            row横向排列
            row-reverse横向反转排列

            justify-content: center;子元素水平排列方式
            center居中
            pace-between两端对齐
            space-around拉手平分
            flex-start居左
            flex-end居右

            align-items: center;子元素垂直排列
            center居中
            flex-start顶部
            flex-end底部

            flex-wrap: nowrap;子元素是否在一行显示
            nowrap不换行
            wrap换行

            align-content: center;子元素多行的时候，垂直排列
            center居中
            flex-start顶部
            flex-end底部
            
            flex-flow: <flex-direction> <flex-wrap>;

        */

        .box {
            width: 500px;
            height: 500px;
            border: 1px solid #000000;
            margin: 20px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: center;
        }

        .div {
            width: 100px;
            height: 100px;
            background-color: red;
            font-size: 40px;
            color: #ffffff;
            text-align: center;
            line-height: 100px;

        }
    </style>
</head>

<body>
    <div class="box">
        <div class="div">1</div>
        <div class="div">2</div>
        <div class="div">3</div>
        <div class="div">4</div>
        <div class="div">5</div>
        <div class="div">6</div>
        <div class="div">7</div>
    </div>
</body>

</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;
            list-style: none;
        }

        /* 
        子元素：
        flex: 1000（系数） 
        子元素在划分父元素宽度时，先刨除固定宽度
        flex-grow: 1;定义子元素放大比例

        align-self: flex-start;
        其实就是用来覆盖父级align-items垂直排列(父级必须使用align-items属性否则align-self无效)


        order: 1;规定子元素顺序，排序，
        数值越小，越靠前，默认值为0

        */

        .box {
            width: 500px;
            height: 500px;
            border: 1px solid #000000;
            margin: 20px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
        }

        .div {
            width: 100px;
            height: 100px;
            background-color: red;
            font-size: 40px;
            color: #ffffff;
            text-align: center;
            line-height: 100px;
            border: 1px solid black;
            box-sizing: border-box;
            flex-grow: 1;
            order: 1;
        }

        .item1 {
            align-self: flex-start;
            order: 0;
        }

        
    </style>
</head>

<body>
    <div class="box">
        <div class="div">1</div>
        <div class="div">2</div>
        <div class="div">3</div>
        <div class="div">4</div>
        <div class="div">5</div>
        <div class="div">6</div>
        <div class="div">7</div>
        <div class="div item1">8</div>
    </div>
</body>

</html>
flex将元素放在最后_果冻公开课第十课：打破传统布局方式的flex（下）
weixin_36280338的博客
01-19 210
其实传统布局方式和人类书写是类似的“从上到下，从左到右，写不下就换行”但经过这些年的发展我们发现这样的方式虽然很好理解但不够灵活于是...动画视频：https://www.zhihu.com/video/1114624428750946304【果冻公开课】前端学习：打破传统布局方式的flex（下）文字解析：其实传统布局方式和人类书写是类似的“从上到下，从左到右，写不下就换行”但经过这些年的发展我们...
弹性盒子display:flex——justify-content主轴方向对齐方式、align-items交叉轴对齐方式、 flex-direction修改主轴方向、flex-wrap换行
ranran0306的博客
03-23 3371
弹性盒子display:flex——justify-content主轴方向对齐方式、align-items交叉轴对齐方式、 flex-direction修改主轴方向、flex-wrap换行、换行之后 align-content
flex浮动的复习
qq_46179838的博客
04-14 1452
flex浮动的复习 目录flex浮动的复习前言一、弹性盒子布局 flex --> flexible box1、任何一个容器都可以指定为给flex布局2、行内元素也可以使用flex布局3.设为flex布局后，子元素的float，clear和vertical-align属性失效。二、基本概念三、容器属性1、flex-flow:flex-direction flex-wrap；简写2、flex-direction 主轴的方向3、flex-wrap 项目是否换行/在一条轴线上4、justify-content
一劳永逸的搞定 flex 布局
sunscheung的博客
11-27 410
一劳永逸的搞定 flex 布局  一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不由得感觉眼前一亮，顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐，然而很快就失望的发现 CSS 中并不存在 float: center 的写法，那么 text-align: center、v
flex布局原理，常见的父项属性,flex布局子项常见属性，利用flex布局和float制作的有轮播图的携程旅行首页
qq_49080239的博客
07-27 477
3、采用flex布局的元素，称为flex容器（flexcontainer）,简称“容器”，它的所有子元素自动成为容器成员，称为flex项目（flexitem），简称“项目”。flex是flexibleBox的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。1、当为父盒子设置为flex布局以后，子元素的float、clear、和vertical-align属性将失效。2、伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局。...
flex 弹性布局，最后一行数量不足一行 列表项目左对齐的解决办法
11-19
flex 弹性布局，最后一行数量不足一行 列表项目左对齐的解决办法，经过实际测试，亲自有效，一行的数量可以随意设置。非常有用！
flex弹性布局基本语法（修改版）.pdf
12-01
Flex 弹性布局基本语法 Flex 弹性布局是一种基于盒模型的传统解决方案，依赖于 display 属性 + position 属性 + float 属性。它可以简便、完整、响应式地实现各种页面布局。 开启 Flex 弹性盒子布局可以通过将元素...
flex弹性布局的理解。
06-15
1. 什么是 flex 布局 2. 基本概念 3. 容器的属性 4. 项目的属性1. 什么是 flex 布局 2. 基本概念 3. 容器的属性 4. 项目的属性 帮助理解项目属性 1. order 2. flex-grow 3. flex-shrink 4. flex-basis 5. flex 6. ...
flex 弹性布局
thothsun 的博客
12-12 1029
flex 弹性布局 上一节介绍了小程序中常用的组件，在使用它们的时候，如何控制它们的位置呢？就需要用到布局了。传统的布局实现方式比较麻烦，要用多个属性配合实现。后来 flex 弹性布局出现后，用其他方式实现的布局，用 flex 布局都能更简洁地实现。本节通过几个简单的例子介绍 flex 布局的基本用法。 首先新建一个空白页面，在一个 view 里面放三个 text。在 view 的样式中添加 display:flex 将 view 设置为弹性布局，组件默认是按照从上到下、从左到右的顺序排列。 <!-
跟面试官扯了半小时的CSS的flex弹性布局，都在这里了。【看完你会更加透彻】
01-08
在理解CSS的flex弹性布局之前，首先需要了解怪异盒模型。在标准盒模型中，元素的总大小由width/height、padding、border和margin组成，而在怪异盒模型中，元素的总大小仅包含width/height和margin。怪异盒模型更接近...
如何解决前端的flex流动布局中的单个子元素位置？
seimeii的博客
10-12 1332
例如三个元素最右边的一个元素只需要设置margin-left: 'auto',即可实现第三个元素浮动到最右边
“约见”面试官系列之常见面试题第六篇说说弹性布局（建议收藏）
歌谣的博客
09-03 1671
目录 一、基本概念 二、容器属性 2.1 flex-direction: 2.2 flex-wrap: 2.3 justify-content: 2.4 align-items: 2.5 align-content: 结合justify-content和align-items，看看在flex-direction两个不同属性值的作用下，轴心有什么不同： 三、项目属性 3.1 order属性 3.2 flex-grow属性 3.3 flex-shrink...
CSS3 弹性布局display:flex详解
LJXLQXX的博客
01-11 2982
弹性盒子display:flex常用属性详解
页面布局-----display:flex详解
热门推荐
weixin_46585382的博客
10-14 4万+
页面布局-----display:flex详解。
微信小程序之flex排版
乾巽的博客
04-29 1319
先上效果图 默认情况下这些botton都是按照列的方式排列的 通过在wxss设置 display flex 可达到实现横向排列的效果 此外,flex还有很强大便利的功能, 比如我要横向居中对齐 display flex; justify-content: center; 这里先讲一下justify-content 由于可以可视化编程,所以自己动手试一下效果就是了 display flex; ...
CSS基础：盒子模型和浮动
LRC1062702315的博客
02-13 1174
css：盒子模型和浮动
弹性布局display:flex
最新发布
qq_26905813的博客
11-10 2573
如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。弹性项目可以在交叉轴上进行对齐，包括顶部对齐、底部对齐、居中对齐等，使用align-items属性定义交叉轴对齐方式。定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
Css布局——浮动、定位、flex
xy25408的博客
08-17 1421
CSS布局 网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的，浏览器默认的排版方式就是标准流的排版方式 常见的布局方式有浮动布局、定位布局、伸缩盒布局。 1.浮动布局 通过float属性将标准流布局改变为浮动布局，float取值为none、left、right，在浮动流中不可以使用margin: 0 auto; float: none 默认值，元素默认在标准流(文档流/普通流)中排列 float: left，元素脱离标准流(文档流/普通流)，向页面的左侧浮动 float: righ
设置display:flex后 flex布局设置单个子元素靠右
sinat_31773153的博客
08-25 3558
设置display:flex后 flex布局设置单个子元素靠右
Flex弹性布局详解与用法
"flex弹性布局用法笔记，主要包括display:flex属性开启弹性布局，flex-direction定义主轴方向，flex-wrap控制是否换行，justify-content调整主轴上的对齐方式，align-items处理交叉轴上的对齐，align-content用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值