Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

【css】利用「占位块」弥补 space-between 的不足 #28

Open
zwwill opened this issue Oct 24, 2018 · 1 comment
Open

【css】利用「占位块」弥补 space-between 的不足 #28

zwwill opened this issue Oct 24, 2018 · 1 comment
Labels
css

Comments

@zwwill
Copy link
Owner

zwwill commented Oct 24, 2018 •
edited
Loading

效果先行

需求

4007646450-59ace24cf093b_articlex

在大量“不定宽”元素并排的布局模式下，上图是我们想要的最佳布局
但是FlexBox布局虽然枪弹但并不能完全呈现以上布局，于是我们需要结合FlexBox作下小的改动即可实现。

css现成的布局方式

Flex布局，具有等分布局的能力，如图

2944464332-59ace26b45117_articlex

问题

但是底部我们并不想如此等分，我们更希望可以同上一排对齐

方案

其实很简单，我们只要在后面加入一些等宽但是占高为0等隐藏元素即可轻松实现。
如图：

274284754-59ace27b269cb_articlex

至于【empty】元素的数量需要不小于单行最多元素的数量即可，
最后我们将empty设置隐藏即可

.empty {
    visibility: hidden; 
}

完整demo代码

【codepen 演示地址】

https://codepen.io/zwwill/pen/bxgpbV

<html>
<head>
    <meta charset="UTF-8">
    <title>并排等分，单排靠左最齐布局</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .main {
        	display: flex;
		    width: 1000px;
		    flex-flow: row wrap;
		    justify-content: space-between;
		    margin: 50px auto;
		    background-color: #ccc;
		    align-content: baseline;
        }
        .main span {
        	width: 132px;
		    height: 200px;
		    display: inline-block;
		    background-color: #666;
		    margin: 4px;
        }
        .main .emp{
            height: 0;
            border: none;
            margin-top: 0;
            margin-bottom: 0;
            visibility: hidden;
        }
    </style>
</head>
<body>
    <div class="main">
        <span style="">1</span>
        <span style="">2</span>
        <span style="">3</span>
        <span style="">4</span>
        <span style="">5</span>
        <span style="">6</span>
        <span style="">7</span>
        <span style="">8</span>
        <span style="">9</span>
        <span style="">10</span>
        <span style="">11</span>
        <span style="">12</span>  
        <span class="emp" >empty</span>
        <span class="emp" >empty</span>
        <span class="emp" >empty</span>
        <span class="emp" >empty</span>
        <span class="emp" >empty</span>
        <span class="emp" >empty</span>
        <span class="emp" >empty</span>
        <span class="emp" >empty</span>
        <span class="emp" >empty</span>
    </div>
</body></html>

转载请标明出处
作者： 木羽 zwwill
首发地址：zwwill/blog#28
@zwwill zwwill changed the title 【css】歪脑筋操作弥补 justify-content 的不足 【css】歪脑筋操作弥补 justify-content: space-between 的不足 Oct 24, 2018
@zwwill zwwill changed the title 【css】歪脑筋操作弥补 justify-content: space-between 的不足 【css】利用「占位块」弥补 space-between 的不足 Oct 24, 2018
@zwwill zwwill added the css label Oct 25, 2018
@zwwill zwwill mentioned this issue Oct 30, 2018
Open
@lzq920
Copy link

lzq920 commented Nov 21, 2018

求教一下~在weex里怎么实现这种效果？动态计算？

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@zwwill @lzq920