问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

问一个flex布局的问题？

头像
liubingyang
    3.4k22355

    先看效果：

    image.png
    image.png

    代码示例：
    image.png

    问题描述：flex竖向排版，自动换行后，子元素即使有宽度也会平均排列，不能左对齐，这个感觉是很简单，但试了半天没试出来，有没有办法。

    前端
    阅读 2.1k
    2 个回答
    得票最新
    头像
    liubingyang
      3.4k22355
      ✓ 已被采纳

      align-content,这么多年没用过这个值，尴尬

      头像
      Clarence
        118728
        <!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-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            padding: 20px;
            margin: 100px auto;
            width: 500px;
            height: 200px;
            line-height: 40px;;
            border: 1px solid #000;
            display: flex;
            flex-flow: column wrap;
            align-content: flex-start;
        }

        #box div {
            width: 100px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div id="box">
        <div>fire a shot</div>
        <div>fire a shot</div>
        <div>fire a shot</div>
        <div>fire a shot</div>
        <div>fire a shot</div>
        <div>fire a shot</div>
        <div>fire a shot</div>
        <div>fire a shot</div>
        <div>fire a shot</div>
        <div>fire a shot</div>
    </div>
</body>
</html>

        用align-content，在cross axis分配剩余的空间.

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题