Flex vertical alignment

Asked

Viewed 369 times

0

I can’t align the blocks vertically once the line is broken, they’re too far apart:

<style>
	body{
		background:black;
	}
.flex-start {
	align-self:flex-start;
}
.wrap {
	flex-wrap: wrap;
}
.container {
	background:white;
	max-width: 360px;
	margin: 0 auto;
	display:flex;
	border: 1px solid #ccc;
	height:105px;
}
.item {
	flex: 1;
	margin: 5px;
	background: tomato;
	text-align: center;
	font-size: 1.5em;
}
</style>

<section class="container wrap">
	<div class="item flex-start">bloco</div>
	<div class="item flex-start">bloco</div>
    <div class="item flex-start">bloco<br><br></div>
    <div class="item flex-start">bloco</div>
    <div class="item flex-start">bloco</div>
    <div class="item flex-start">bloco</div>
    <div class="item flex-start">bloco</div>
    <div class="item flex-start">bloco</div>
    <div class="item flex-start">bloco</div>
</section>

I really want to get close to that vertical distance between the block of the previous line with the block of the posterior line. I intend to keep them close even if it contains some block of different size.

css flexbox

  • https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/ read you’re interested, here’s the https://masonry.desandro.com plugin/

2 answers

0

As you said yourself the need, what Voce can do is, instead of using the tag <br> to separate the blocks, Voce can place the amount of items needed within each block of items, where they will have the functionality of the justify-content that will separate them identically and automatically. If you open the inspect element of your browser, you will see that the space between a block and another, does not contain margin, but comes from its size. If you want to approach them closely, use negative margin ( but not recommended ), because this automatic question, comes from the best use experience and visibility for the user.

<style>
    body {
        background: black;
    }

    .flex-start {
        display: flex;
        justify-content: center;
    }

    .container {
        background: white;
        max-width: 360px;
        margin: 0 auto;
        display: flex;
        border: 1px solid #ccc;
        height: 105px;
    }


    .wrap {
        flex-wrap: wrap;
    }

    .item {
        flex: 1;
        margin: 0 5px;
        background: tomato;
        text-align: center;
        font-size: 1.5em;
    }

    .wrap-item {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
</style>

<section class="container wrap">
    <div class="wrap-item">
        <div class="item flex-start">bloco</div>
        <div class="item flex-start">bloco</div>
        <div class="item flex-start">bloco</div>
        <div class="item flex-start">bloco</div>
    </div>


    <div class="wrap-item">
        <div class="item flex-start">bloco</div>
        <div class="item flex-start">bloco</div>
        <div class="item flex-start">bloco</div>
        <div class="item flex-start">bloco</div>
    </div>

</section>

  • @wDrik I put the <br> p/ demonstrate since each block will have a different content resulting in a different size. I want proximity between all the blocks

  • If this is the case Voce can do differently, I will edit the answer.

  • Thank you, I had already done so and what I try to do is to leave the blocks close on all sides. Msm centered is visible spacing remaining.

0

Brother, from what I understand this is what you need?! align-items: stretch; in .flex-start

body{
  background:black;
}
.flex-start {
  display: flex;
  align-items: stretch;
}
.wrap {
  flex-wrap: wrap;
}
.container {
  background:white;
  max-width: 360px;
  margin: 0 auto;
  display:flex;
  border: 1px solid #ccc;
  height:105px;
  align-content: stretch;
}
.item {
  flex: 1;
  margin: 5px;
  background: tomato;
  text-align: center;
  font-size: 1.5em;
}
<section class="container wrap">
  <div class="item flex-start">bloco</div>
  <div class="item flex-start">bloco<br><br></div>
  <div class="item flex-start">bloco</div>
  <div class="item flex-start">bloco</div>
  <div class="item flex-start">bloco</div>
  <div class="item flex-start">bloco</div>
  <div class="item flex-start">bloco</div>
  <div class="item flex-start">bloco</div>
  <div class="item flex-start">bloco</div>
</section>

Browser other questions tagged css flexbox

You are not signed in. Login or sign up in order to post.