移动web-flex布局

已于 2022-03-15 08:13:39 修改
阅读量382 收藏 3
点赞数
文章标签： css css3 前端
于 2022-03-14 18:21:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52822043/article/details/123471528
版权

目录

 

1. flex布局原理

1)flex

2)flex container

原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

2. flex布局父项常见属性

1)flex-direction 设置主轴的方向

2) justify-content 设置主轴上的子元素排列方式

 3)flex-wrap 设置子元素是否换行

4)align-content 设置侧轴上的子元素排列方式（多行）

5)align-item 设置侧轴上的子元素排列方式（单行）

6)flex-flow 

3. flex布局子项常见元素

1)flex属性 子项目分配剩余空间

2)align-self 控制子项目自己在侧轴上的排列方式

3)order 定义项目的排列顺序

 

1. flex布局原理

1)flex

flex：flexible box，弹性布局，用来为盒装模型提供最大的灵活性，任何一个容器都可以指定为flex布局。

  • 父盒子设置为flex布局之后，子元素的float、clear、vertical- align属性都将失效
  • 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局

2)flex container

flex容器（flex container）：采用flex布局的元素，简称为容器。它的所有子元素自动成为容器成员，称为flex项目（flex item），简称为项目。

  • div就是flex父容器
  • span就是子容器的flex项目
  • 子容器可以横向排列也可以纵向排列

原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAcXFfNTI4MjIwNDM=,size_20,color_FFFFFF,t_70,g_se,x_16

 

   <style>
        div {
            /* flex父容器 */
            display: flex;
            width: 80%;
            height: 500px;
            background-color: pink;
            /* justify-content: space-around; */
        }
        div span {
            width: 200px;
            height: 200px;
            margin-left: 10px;
            background-color: purple;
            flex: 1;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>1</span>
        <span>1</span>
    </div>
</body>

效果图：

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAcXFfNTI4MjIwNDM=,size_20,color_FFFFFF,t_70,g_se,x_16

 

2. flex布局父项常见属性

对父元素设置的属性：

  • flex-direction:设置主轴的方向
  • justify-content:设置主轴上的子元素排列方式
  • flex-wrap:设置子元素是否换行
  • align-content:设置侧轴上的子元素的排列方式，多行
  • align-items:设置侧轴上的子元素的排列方式，单行
  • flex-flow:复合属性，就是同时设置了flex-direction和flex-wrap

主轴和侧轴：行和列、x轴和y轴

  • 默认主轴方向就是x轴方向，水平向右
  • 默认侧轴方向就是y轴方向，水平向下

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAcXFfNTI4MjIwNDM=,size_20,color_FFFFFF,t_70,g_se,x_16

 

1)flex-direction 设置主轴的方向

决定主轴的方向，也就是项目的排列方向

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAcXFfNTI4MjIwNDM=,size_20,color_FFFFFF,t_70,g_se,x_16

2) justify-content 设置主轴上的子元素排列方式

定义了项目在主轴上的对齐方式，使用之前要确定主轴是哪个

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAcXFfNTI4MjIwNDM=,size_20,color_FFFFFF,t_70,g_se,x_16

 3)flex-wrap 设置子元素是否换行

默认情况下，项目都是排在一条线（轴线）上的。flex布局默认是不换行的

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAcXFfNTI4MjIwNDM=,size_20,color_FFFFFF,t_70,g_se,x_16

4)align-content 设置侧轴上的子元素排列方式（多行）

设置子项在侧轴上的排列方式并且只能用于子项出现换行(flex-wrap:wrap;)的情况（多行），在单行下是没有效果的

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAcXFfNTI4MjIwNDM=,size_20,color_FFFFFF,t_70,g_se,x_16 

5)align-items 设置侧轴上的子元素排列方式（单行）

控制子项在侧轴（默认是y轴）上的排列方式，在子项为单项的时候使用

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAcXFfNTI4MjIwNDM=,size_20,color_FFFFFF,t_70,g_se,x_16

6)flex-flow 

flex-direction和flex-wrap的复合写法

flex-flow: row wrap;

    <style>
        div {
            /* flex父容器 */
            display: flex;
            width: 80%;
            height: 500px;
            background-color: pink;
            /* flex-direction 设置主轴的方向 */
            /* 1.默认主轴的方向是row、行、x轴->横向排列，从左到右 */
            flex-direction: row;
            /* 2.翻转，主轴的方向是x轴反方向，从右到左 */
            /* flex-direction: row-reverse; */
            /* 3.主轴的方向是column、列、y轴->纵向排列，从上到下 */
            /* flex-direction: column; */
            /* 4.翻转，主轴的方向是y轴反方向，从下到上 */
            /* flex-direction: column-reverse; */

            /* justify-content 设置主轴上的项目排列方式 */
            /* 1.默认为从头开始，主轴是x轴的话则为从左到右排列 */
            justify-content: start;
            /* 2.从尾部开始排列，最后一个子元素贴着右边框 */
            /* justify-content: end;             */
            /* 3.居中对齐 */
            /* justify-content: center; */
            /* 4.平分剩余的空间 */
            /* justify-content: space-around; */
            /* 5.线两边贴边，然后再平分剩余的空间 */
            /* justify-content: space-between; */

            /* flex-wrap 设置子元素是否换行 */
            /* 1.项目默认是不换行的，如果装不下这些项目，就会自动缩小项目的宽度放到轴线上 */
            /* flex-wrap: nowrap; */
            /* 2.换行 */
            flex-wrap: wrap;

            /* align-item 设置侧轴上的项目排列方式（单行） */
            /* 1.从上到下 */
            /* align-items: start; */
            /* 2.从下到上 */
            /* align-items: end; */
            /* 3.垂直居中 */
            /* align-items: center; */
            /* 4.默认，拉伸，但是子元素一般不给高度才拉伸 */
            align-items: stretch;

            /* align-content 设置侧轴上的项目排列方式（多行） */
            /* 1.默认，在侧轴的头部开始排列 */
            align-content: start;
            /* 2.在侧轴的尾部开始排列 */
            /* align-content: end; */
            /* 3.在侧轴中间显示 */
            /* align-content: center; */
            /* 4.在侧轴平分剩余空间 */
            /* align-content: space-around; */
            /* 5.先分布在两头，然后平分剩余的空间 */
            /* align-content: space-between; */
            /* 6.子项没有高度，自行设置子项元素高度来平分父元素高度 */
            /* align-content: stretch; */

        }
        div span {
            width: 200px;
            height: 200px;
            background-color: purple;
            
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
</body>

3. flex布局子项常见元素

  • flex：子项目占的份数
  • align-self：控制子项自己在侧轴的排列方式
  • order：定义子项的排列顺序

1)flex属性 子项目分配剩余空间

定义子项目分配剩余空间，用flex来表示占多少份数

    <style>
        div {
            display: flex;
            width: 60%;
            height: 300px;
            background-color: pink;
            margin: 0 auto;
        }

        div span:nth-child(1) {
            width: 100px;
            background-color: red;
        }
        div span:nth-child(2) {
            /* 中间剩余的份数平分为1，即占了中间所有的部分 */
            flex: 1;
            background-color: green;
        }
        div span:nth-child(3) {
            width: 100px;
            background-color: blue;
        }

        section {
            display: flex;
            width: 60%;
            height: 300px;
            background-color: pink;
            margin: 0 auto;
        }
        section span {
            /* 三等分 */
            flex: 1;
        }
        section span:nth-child(2) {
            /* 占1/2 */
            flex: 2;
        }
        
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

    <section>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </section>
</body>

效果图：

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAcXFfNTI4MjIwNDM=,size_20,color_FFFFFF,t_70,g_se,x_16

 

2)align-self 控制子项目自己在侧轴上的排列方式

允许单个项目有与其他项目不一样的对齐方式，可以覆盖align-items属性

默认值为auto，表示继承父元素的align-items属性，如果没有父元素就=stretch

    <style>
        div {
            display: flex;
            width: 80%;
            height: 200px;
            background-color: pink;
        }
        div span {
            width: 100px;
            height: 100px;
            background-color: purple;
            margin-right: 10px;
        }
        div span:nth-child(3) {
            /* 对齐方式与align-items不同，可以覆盖 */
            align-self: end;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

效果图：

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAcXFfNTI4MjIwNDM=,size_20,color_FFFFFF,t_70,g_se,x_16 

3)order 定义项目的排列顺序

数值越小，排列越靠前，默认是0

    <style>
        div {
            display: flex;
            width: 80%;
            height: 200px;
            background-color: pink;
        }
        div span {
            width: 100px;
            height: 100px;
            background-color: purple;
            margin-right: 10px;
        }
        div span:nth-child(3) {
            /* 对齐方式与align-items不同，可以覆盖 */
            align-self: end;
            /* 默认为0，越小越靠前 */
            order: -1;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

效果图：

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAcXFfNTI4MjIwNDM=,size_20,color_FFFFFF,t_70,g_se,x_16

 

 

 

 

qq_52822043
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
web flex上传
05-13
java web jsp flex 文档上传 js 及 实例
弹性布局-flex布局.zip
05-18
移动web端之flex布局笔记，包含案例和实战代码
【Web】Flex布局
WHUZXQ的博客
08-30 505
转自：http://ife.baidu.com/note/detail/id/952 Flex布局是什么？ W3C针对布局设计的新标准，相对float和position会更加灵活处理父元素和子元素之间布局关系，让布局更加直观和灵活简单。有效的针对不同屏幕宽度大小的情况下，让元素自动有效合理处理布局结构。 适用范围 弹性盒子布局主要适用于应用程序的组件及小规模的布局，而（新兴的）栅格布局则针
css flex 布局换行
最新发布
℡メ㏑╭ァ小凯
03-07 1198
加上这个就行了：flex: 1 0 calc(20% - 40px);/* 控制一行显示5个，设置间距为20px */，最后效果。默认使用display: flex;是不换行的，只需要加上flex-wrap: wrap;通过上面我们发现虽然时间换行了，但是每行的边距不一样。
Flex布局-学习笔记
weixin_43482965的博客
03-01 514
1.传统布局与flex布局 (1)传统布局 兼容性好 布局繁琐 局限性，不能再移动端很好的布局 (2)flex 弹性布局 操作方便，布局极为简单，移动端应用很广泛 PC 端浏览器支持情况较差 IE 11或更低版本，不支持或仅部分支持 2.flex布局简要 （1）flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 fle...
移动web开发_flex布局
weixin_45513733的博客
01-27 177
移动web开发——flex布局 1.0传统布局和flex布局对比 1.1传统布局 兼容性好 布局繁琐 局限性，不能再移动端很好的布局 1.2 flex布局 操作方便，布局极其简单，移动端使用比较广泛 pc端浏览器支持情况比较差 IE11或更低版本不支持flex或仅支持部分 1.3 建议 如果是pc端页面布局，还是采用传统方式 如果是移动端或者是不考虑兼容的pc则采用flex 2.0 flex布局原理 flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活
移动WEB开发之flex布局
CV工程师呀
07-15 222
1. flex布局原理 flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 =flex布局 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。 2.flex布局父项常见属性 2.1flex-direction 设置主轴的方向 2.2justify-content 设置主轴上的子元素排列方式 注意
移动web开发实例flex布局案例源码
02-16
移动web开发实例flex布局案例源码
移动web 第四天flex布局、实战演练小兔仙
12-25
移动web flex布局、实战演练小兔仙
lorry0508#The-front-end-notes#移动web开发_flex布局1
07-25
1.技术选型 2.搭建相关文件夹 3.设置视口标签以及引入初始化样式 4.常用初始化样式 5.模块名字划分
移动web 第三天移动端特点、百分比布局、flex布局
12-25
移动web 移动端特点、百分比布局、flex布局
web前端基础——flex布局
NGUP_LEE的博客
03-09 495
1、简介 Flex布局/弹性布局是一种浏览器提倡的布局模型，使用FLex布局网页更加简单、灵活，且可以避免浮动脱标的问题 2、Flex布局模型构成 基于Flex精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生，Flex布局非常适合结构化布局 使用方式： 父元素（亲爹）添加属性display:flex，子元素可以自动的挤压或者拉伸 组成部分： 弹性容器 弹性盒子 主轴（默认在弹性容器中心水平方向，弹性盒子默认沿着主轴排列） 侧轴/交叉轴（默认在中心垂直方向） 3、Flex主轴对齐方式 使
web flex
weixin_60987286的博客
12-24 84
之前我看黑马的视频，里面没有讲到flex这个属性，都不知道这个很重要，感觉它可以代替浮动
web移动端：flex布局
weixin_49555741的博客
05-27 313
1. flex布局体验 1.1 传统布局和flex布局 建议： 如果是PC端用传统的页面布局 如果是移动端不考虑兼容问题可以使用flex弹性布局 1.2 初体验 1.2.1 搭建HTML结构 <div> <span>1</span> <span>2</span> <span>3</span> </div> 2. fl...
移动Web之flex弹性布局
wfewan的博客
10-08 241
flex弹性布局的基本命令
web前端布局之flex布局
zzyaiaad的博客
05-08 557
总的来说，flex布局的原理通过给父元素添加flex属性，来控制子元素的位置和排列方式。 采用flex布局的元素称为flex容器。 flex容器中存在两条轴，分别为主轴和侧轴，容器中的每个单元称为flex项目。 在容器上可以设置6个属性：分别为：（flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-conten...
WebFlux 详解
热门推荐
zhang33565417的博客
12-18 5万+
今天我们开始来学习下 WebFlux，为什么突然要学这个东西？ 因为我之前是想学习 Spring Cloud Gateway 来着，然后发现它是基于 Spring5.0+SpringBoot2.0+WebFlux等技术开发的。所以学之前才要来简单了解下 WebFlux 技术。 然后要学习 WebFlux 时我发现又需要 Java 8 中的函数式编程、Stream 流等技术作为前置知识。环环相扣啊，套娃一样。 所以前面还有两篇学习的文章：来系统学习下 lambda 表达式吧和来一起学习下 Java 8 的 S
flex
09-23 82
地址：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 例子::运行后看效果 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <ti...
flex----------弹性布局
weixin_30414245的博客
01-16 46
1.任何一个容器都可以指定为flex布局， 块级元素：eg：.box{ display:flex } 行内元素：eg：.box{ dlsplay:inline-flex } webkit内核...
web中flex布局
12-24
常用的Flex属性包括`flex-grow`、`flex-shrink`和`flex-basis`。 下面是一个使用Flex布局的示例： ```html .container { display: flex; justify-content: center; align-items: center; height: 200px; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值