15、Flex布局（2-7是介绍用在父容器中的属性设置，8-12是介绍用在items上的属性介绍）

最新推荐文章于 2023-05-25 08:44:17 发布
最新推荐文章于 2023-05-25 08:44:17 发布
阅读量233 收藏
点赞数
分类专栏： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuan_21/article/details/115483184
版权

15、Flex布局（2-7是介绍用在父容器中的属性设置，8-12是介绍用在items上的属性介绍）

1.flex布局简介

  flex布局（Flexible布局，弹性布局）
  开启了Flex布局的元素叫flex container。
  flex container里面的直接子元素叫做flex items。

  • 开启flex布局方法：设置display属性为flex或inline-flex。它的作用范围为他的直接子元素。
    flex：flex container 以块级元素存在
    inline-flex：flex container以行内元素存在
    案例：无flex布局
    代码：
<!--pages/demo06/demo06.wxml-->
<view>
    <view >学号：</view>
    <input name='name' style="border:1rpx solid gray"></input>
</view>

运行截图：
在这里插入图片描述
案例：使用flex布局
代码：

<!--pages/demo06/demo06.wxml-->
<view style='display:flex'>
    <view >学号：</view>
    <input name='name' style="border:1rpx solid gray"></input>
</view>

`运行截图：
在这里插入图片描述

2.flex-direction

flex items默认都是沿着主轴方向从主轴开始到结束的方向排列。
flex-direction决定了主轴的方向，有四个取值。row（默认值），，row-reverse，column，column-reverse。
四种值的主轴样式如下：
在这里插入图片描述案例代码：

<!--pages/demo06/demo06.wxml-->
<view style='display:flex;flex-direction:row-reverse'>
    <view >学号：</view>
    <input name='name' style="border:1rpx solid gray"></input>
</view>

运行截图：
在这里插入图片描述

3.justify-content

justify-content：决定了flex items在主轴上的对齐方式。
取值有：
flex-start（默认值）；flex-end，center，
space-between（flex items与主轴开始 结束位置对齐，items间距离相等）
space-around（flex items之间间距离相等，与主轴开始、结束之间的距离也相等）
space-evenly（flex items之间间距离相等，是主轴开始、结束之间的距离的两倍）
在这里插入图片描述

案例代码：

<!--pages/demo06/demo06.wxml-->
<view style='display:flex;flex-direction:row-reverse;justify-content:center'>
    <view >学号：</view>
    <input name='name' style="border:1rpx solid gray"></input>
</view>

运行截图：
在这里插入图片描述

4. align-items

align-items决定了flex items 在cross axis交叉轴上的对齐方式。
交叉轴永远是与主轴垂直的那个轴。方向朝下或朝右。
取值：
stretch（默认值）：当flex items在cross axis方向的size为auto时，会自动拉伸至填充至flex container。
flex-start
flex-end
center
baseline
在这里插入图片描述

案例代码：

<!--pages/demo06/demo06.wxml-->
<view class='st'>
    <view >学号：</view>
    <input name='name' style="border:1rpx solid gray"></input>
</view>

/* pages/demo06/demo06.wxss */
.st{
  border:1rpx solid gray;
  width: 600rpx;
  height:600rpx;
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  }

运行截图：
在这里插入图片描述

  • 详解一下这里说的拉伸（stretch（默认值）：当flex items在cross axis方向的size为auto时，会自动拉伸至填充至flex container。）
    首先通过 flex-direction:row; 知道主轴为横轴（当然如果没有设定flex-direction值默认也为横轴），如果设定flex items在交叉轴（与主轴垂直）方向size为auto，会自动拉伸至填充至flex container。
<!--pages/demo06/demo06.wxml-->
<view class='st'>
    <view class='item' style="background-color:#f00">学号1：</view>
    <view class='item' style="background-color:#0f0">学号2：</view>
    <view class='item' style="background-color:#00f">学号3：</view>
    <view class='item' style="background-color:#ff0">学号4：</view>   
</view>

/* pages/demo06/demo06.wxss */
.st{
  border:1rpx solid gray;
  width: 600rpx;
  height:600rpx;
  display:flex;
  flex-direction:row;
  justify-content:center;
  }


.item{
  height:auto;
}

运行截图：
在这里插入图片描述

5. flex-wrap

flex-wrap决定了flex container是单行还是多行。
取值：nowrap（默认），单行，如果内容多了可能会挤压flex items
wrap：多行
warp-reverse：多行（对比wrap，cross start 与cross end相反）
案例代码：flex-wrap为默认值。

<!--pages/demo06/demo06.wxml-->
<view class='st'>
    <view class='item' style="background-color:#f00">学号1：</view>
    <view class='item' style="background-color:#0f0">学号2：</view>
    <view class='item' style="background-color:#00f">学号3：</view>
    <view class='item' style="background-color:#ff0">学号4：</view>  
    <view class='item' style="background-color:#0ff">学号5：</view>
    <view class='item' style="background-color:#f0f">学号6：</view>
    <view class='item' style="background-color:#df8">学号7：</view>    
</view>

/* pages/demo06/demo06.wxss */
.st{
  border:1rpx solid gray;
  width: 600rpx;
  height:600rpx;
  display:flex;
  flex-direction:row;
  justify-content:center;
  }


.item{
  height:100rpx;
}

运行截图：
在这里插入图片描述

案例：flex-wrap值设为多行wrap
在这里插入图片描述

6. flex-flow

flex-flow是flex-direction||flex-wrap的简写
在这里插入图片描述

7. align-content

align-content决定了多行flex items在cross items 在cross axis上的对齐方式，用法与justify-content类似。
取值：stretch（默认）：与align-items的stretch类似（交叉轴方向，items的size为auto会自动拉伸）。
flex-start
flex-end
center
space-bewteen
space-around
在这里插入图片描述

案例代码wxml代码与上节相同。
在这里插入图片描述

8. order

order决定了flex items的排布顺序，可以设置为任意整数（正整数、负整数，0），值越小越排在前面。默认值是0.
案例代码：

<!--pages/demo06/demo06.wxml-->
<view class='st'>
    <view class='item' style="background-color:#f00;order:3">学号1：</view>
    <view class='item' style="background-color:#0f0">学号2：</view>
    <view class='item' style="background-color:#00f">学号3：</view>
</view>

/* pages/demo06/demo06.wxss */
.st{
  border:1rpx solid gray;
  width: 600rpx;
  height:600rpx;
  display:flex;
  flex-direction:row;
  }
.item{
  height:100rpx;
}

运行截图：
在这里插入图片描述

9. align-self

flex items可以通过align-self覆盖flex container设置的align-items。
取值：
auto（默认值）：遵从flex container的align-items设置。
stretch，flex-start，flex-end，center，baseline，效果跟align-items一样。
案例代码：

<!--pages/demo06/demo06.wxml-->
<view class='st'>
    <view class='item' style="background-color:#f00;align-self:flex-start">学号1：</view>
    <view class='item' style="background-color:#0f0">学号2：</view>
    <view class='item' style="background-color:#00f">学号3：</view>
</view>

/* pages/demo06/demo06.wxss */
.st{
  border:1rpx solid gray;
  width: 600rpx;
  height:600rpx;
  display:flex;
  flex-direction:row;
  align-items: center;
  }
.item{
  height:100rpx;
}

运行截图：
在这里插入图片描述

10. flex-grow

flex-grow决定了flex items如何扩展。可以设置为任意非负数（正小数，正整数，0），默认值为0.。

当flex container在main axis方向上有剩余空间时，flex-grow属性才会有效。

  • 如果所有flex items的flex-grow总和sum超过1，每个flex item扩展的size为flex container的剩余size*flex-grow/sum
  • 如果所有flex items的flex-grow总和sum不超过1，每个flex item扩展的size为flex container的剩余size*flex-grow
  • flex items扩展后的最终size不能超过max-height或者max-width。

案例代码：wxss文件代码与第9节一样

<!--pages/demo06/demo06.wxml-->
<view class='st'>
    <view class='item' style="background-color:#f00;flex-grow:1;">学号1：</view>
    <view class='item' style="background-color:#0f0;flex-grow:2;">学号2：</view>
    <view class='item' style="background-color:#00f;flex-grow:1;">学号3：</view>
</view>

运行截图：
在这里插入图片描述

11. flex-shrink

flex-shrink决定了flex items如何收缩。可以设置为任意非负数值（正小数，正整数，0），默认值为1.
当flex items在main axis方向上超过了flex container的size时，flex-shrink属性才会有效。

  • 每个item收缩的size为flex items超出flex container的size*收缩比例/所有flex items的收缩比例之和。
  • 收缩比例=flex-shrink*flex item的base size
    base size 是flex item 放入flex container之前的size
  • flex items 收缩后的最终size不能小于min-height或者min-width

例：收缩长度计算：
item1： width:100rpx;flex-shrink:1
item2： width:200rpx;flex-shrink:2
item3： width:300rpx;flex-shrink:3

收缩比例：
item1:1001
item2:2002
item3:300*3

item1:100*（1001+2002+3003）
item2:200（1001+2002+3003）
item3:300（1001+2002+300*3）

12. flex-basis

flex-basis用来设置flex item在主轴main axis方向上的base size
取值：
auto（默认值）、content：取决于内容本身大小。

  • 决定flex item最终base size的因素，优先级从高到低
    max-width、max-height、min-width、min-height
    flex-basis
    width、height
    内容本身

在这里插入图片描述
具体内容请看：参考链接视频

追星星の人
关注
专栏目录
flex布局items:flex-grow;(放大items)和flex-shrink(收缩)
leigangg的博客
02-18 363
1.flex-grow flex-gorw决定了items如何扩展 1.flex-gorw可以设置任意的分非负数的小数,包括正小数,正整数,和0,他的默认值为0 2.当container的宽度大于items的总和时,fleix-gorw才会生效.但是不会超过container的总宽度. 3.如果所有的items设置的flex-gorw属性值都超过1或等于1那么itmes会扩展到和container...
flex布局items
leigangg的博客
02-18 408
flex布局idems元素 diems是container的子元素，他会默认继承父元素的flex效果，也就是说只要父元素开启了flex布局那么他就会默认按照flex布局的排列方式进行排列： <style> .test{ height: 400px; width: 400px; backgro...
CSS之flex弹性布局 (十二)：认识flex布局、flex布局的理解、flex-container属性、flex-item属性
Good Good Study,Day Day Up!
05-25 726
只有非常少数的网站依然在用浮动来布局floats存在很大的局限性。
解析八大Flex布局规则
aideyi的专栏
12-31 479
本文和大家重点讨论一下Flex布局规则，主要包括VBox布局，HBox布局，Canvas布局等八种布局规则，相信通过本文的简单描述，你对Flex布局规则有深刻的认识  。 　　Flex布局规则 　　1)VBox 　　子元素沿垂直方向排列；每个子元素都绘制在前一标签的下方 　　(2)HBox 　　子元素沿水平方向排列；每个子元素都绘制在前一标签的右方 　　(3)Canvas 　　Fle
详细了解flex布局的相关属性
百岁如流富贵冷灰的博客
07-05 1665
flex布局相信大家已经不陌生了，越来越多的人在开发中使用flex进行自适应的布局。但是呢，有些flex的属性代表什么意思你真的了解吗？下面我就着重说一说不常用的flex属性吧（可能只是我个人不常用 (⊙﹏⊙)） 包含元素设置display: inline-flex 顾名思义包含元素即包含inline的特性也包含flex的特性： inline-flex: flex: aline-items：baseline/flex-start/flex-end 常用的center就不多说了，fle..
css flex布局 —— 容器属性 align-items
且听风吟的博客
09-28 6490
css flex布局 —— 容器属性 align-items
flex布局align-items和align-content的区别，flex-direction容器属性
qq_22905801的博客
08-17 47
与初始状态一样，align-content: center并没有起作用，因为此时是以所有子项作为一个整体，而flex容器并没有指定高度（flex容器的高度即为子项整体的最大高度），所以flex容器在交叉轴上没有多余的空间，那么子项整体自然而然也就没有在交叉轴上对齐的说法了。只适用多行的flex容器（子项不止一行时该属性才有效果），它的作用是当flex容器在交叉轴上有多余的空间时，将子项作为一个整体（属性值为：flex-start、flex-end、center时）进行对齐。对单行的子项也有作用。......
Flex 弹性布局一——flex 容器及设置在容器上的属性
学习资源
11-24 556
Flex 弹性布局一——flex 容器及设置在容器上的属性
CSS3 Flexbox中flex-shrink属性的用法示例介绍
09-25
在CSS3的Flexbox布局模型中，`flex-shrink`属性是一个非常重要的概念，它用于控制flex items（弹性元素）在空间不足时的收缩行为。当flex container（弹性容器）的总宽度不足以容纳所有flex items时，`flex-shrink`...
Flex布局-04-align-items 常用属性值配置
Echo
01-22 1147
1、align-items 常用属性配置 1.1 沿侧轴居中排列 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-s
flex 平铺布局_最详细完整的flex弹性布局
weixin_39965881的博客
12-19 2202
初了解在学习弹性布局之前首先就要明白其概念flex 就是flexible box的缩写，意为弹性布局，用来为盒装模型提供最大的灵活性任何一个容器都可以指定为flex布局.box{display: flex;}行内元素当然也可以使用flex布局.box{display: inline-flex;}Webkit 内核的浏览器，必须加上-webkit前缀。.box{display: -webkit-fl...
前端学习（257）:flex-direction
歌谣的博客
12-30 308
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
flex布局，7个元素2行排列
weixin_44166439的博客
01-29 2144
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul> <style> ul { .
flex布局-容器内item属性
sqf251877543的博客
09-01 3359
1、order (1) flex布局内item元素没有指定order属性时，默认值都是0。 (2) flex布局内排列子item是根据每个子item的order值大小排列的，order值越小越靠前。 2、flex-grow 测试代码： 1、order测试 为box3添加order属性： .box3{ order: -1; } 效果： ...
css flex布局iOS8兼容性问题
lzc的博客
07-25 8497
cssflex布局iOS8兼容性问题，大多数情况下都能够通过兼容性写法解决，比如： div { display: -webkit-flex; display: flex; -webkit-flex: 1; flex: 1; flex-direction: row; -webkit-flex-direction: row; } 如果以上兼容性写法还不能解决问题，那就要...
flex布局中align-items 和align-content的区别
热门推荐
Hey firefly
05-29 8万+
参考资料：http://stackoverflow.com/questions/31250174/css-flexbox-difference-between-align-items-and-align-content看了很多翻译的技术文档，这一块都讲得模糊不清，看到stackoverflow上有人提问后的回答觉得十分清晰，特来分享，有不当之处欢迎指正。 align-items The ali
CSS3 Flex布局子元素的属性
歪脖先生的博客
02-24 3023
弹性子元素的属性弹性布局盒模型的核心，在于弹性容器中子元素的尺寸是弹性的，容器会根据布局的需要，自动调整子元素的尺寸和顺序，并以最佳方式填充所有可用空间。当容器中有空白空间时，子元素可以扩展，以占据额外的空白空间；当容器中的空间不足时，子元素可以缩小尺寸，以防止超出容器范围。在弹性布局盒模型中，浏览器会根据子元素的相关属性，来自动调整子元素的尺寸和顺序。这些属性见表 9‑8：表 9-8 CSS3弹...
假如有一高度自适应的div，父元素高度600px，里面有两个div，一个高度100px，希望另一个填满剩下的高度...
weixin_30700977的博客
05-03 229
转载于:https://www.cnblogs.com/yuanyuan-1994/p/8984473.html
flex布局items:align-self;
leigangg的博客
02-18 958
align-self align-self是设置单个items的对齐方式的 align-self可以单独给items设置对齐方式,他对齐的是container的交叉轴 具体代码: <style> .test{ height: 400px; width: 400px; background-c...
下面哪个属性用来设置flex布局容器内容在交叉轴上的对齐方式：（1 分） A．flex-direction B．align-content C．justify-content D．align-items
最新发布
06-06
正确答案是 D。 在 Flex 布局中，可以使用 `align-items` 属性来设置容器内项目在交叉轴上的对齐方式。这个属性的语法如下： ```css .container { align-items: stretch | flex-start | flex-end | center | baseline; } ``` 其中，取值可以是下列之一： - `stretch`：默认值，项目被拉伸以适应容器。 - `flex-start`：项目顶部与容器的顶部对齐。 - `flex-end`：项目底部与容器的底部对齐。 - `center`：项目在交叉轴上居中对齐。 - `baseline`：项目的第一行文字的基线对齐。 例如，假设有一个 Flex 容器 `.container`，其中包含三个项目 `.item1`、`.item2` 和 `.item3`，可以使用以下代码将这些项目在交叉轴上居中对齐： ```css .container { display: flex; align-items: center; } ``` 在上面的代码中，首先将 `.container` 设置为 Flex 布局，然后使用 `align-items: center` 将其中的项目在交叉轴上居中对齐。 因此，选项 D 中的 `align-items` 是用来设置 Flex 布局容器内项目在交叉轴上的对齐方式的属性。选项 A 中的 `flex-direction` 是用来设置 Flex 布局项目的排列方向的属性；选项 B 中的 `align-content` 是用来设置多行 Flex 布局的行对齐方式的属性；选项 C 中的 `justify-content` 是用来设置 Flex 布局项目在主轴上的对齐方式的属性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值