解决flex-direction: column 之后元素宽度自动变为100%

一、问题描述
二、解决方式
- 1.设置某个子元素
- 2.设置所有子元素
三、具体原因

一、问题描述

当我们设置父元素flex-direction为column后，他的子元素如果我们没有设置具体宽度（可能我们希望子元素宽度由内容撑开），这时就会发现，所有的子元素宽度默认是100%了
例如：
在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
  <style>
    .box {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 300px;
        width: 500px;
        padding: 20px;
        background: #1E9FFF;
    }
    .item {
        height: 50px;
        background: #5FB878;
    }
  style>
head>
<body>
<div class="box" style="">
  <span class="item">第一个子元素span>
  <span class="item">第二个子元素span>
  <span class="item">第三个子元素span>
div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

二、解决方式

解决方式其实很简单

1.设置某个子元素

我们给对应子元素的align-self设置除auto和stretch之外的值就行
例如：

<div class="box" style="">
  <span class="item" style="align-self: baseline">第一个子元素span>
  <span class="item">第二个子元素span>
  <span class="item">第三个子元素span>
div>
1
2
3
4
5

在这里插入图片描述

2.设置所有子元素

给父元素的alin-items设置除auto和stretch之外的值就行
例如：

  <style>
    .box {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: start;
        height: 300px;
        width: 500px;
        padding: 20px;
        background: #1E9FFF;
    }
    .item {
        height: 50px;
        background: #5FB878;
    }
  style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在这里插入图片描述

三、具体原因

我们知道在flex中align-self和align-items的作用差不多，不过align-self是设置子元素自己的对齐方式，而align-items是设置所有子元素的对其方式。
align-self和align-items在flex布局中默认值效果基本和stretch一样。（详细参见MDN）而stretch的作用是拉伸“自动”大小的物品以适合容器，也就是当我们不设置子元素的宽度时，它就会拉伸子元素填充满父元素。

相关阅读:
dashboard报错错误：无法获取网络列表、dashboard报错错误：无法获取云主机列表解决流程
Windows远程桌面登录Ubuntu、Deepin、统信UOS等Linux桌面
android 创建桌面快捷方式 ShortCut
Dubbo系列之微服务框架整合教程
网络系统管理 - Windows AD Server主域控目录配置
echarts图表区间展示
轻松连接远程服务器SecureCRT for Mac/Windows
通话质量好蓝牙耳机有哪些？通话品质好的蓝牙耳机推荐
软考中级软件设计师该怎么备考
03 - 雷达的基本组成

原文地址：https://blog.csdn.net/weixin_43845090/article/details/126029745