Flexbox: Is it possible to force 100% wide on a daughter div with space-between on the father?

Asked

Viewed 439 times

2

I have the following problem, I have a div parent encompassing three elements, and she has css:

.pai{
    display:flex;
    justify-content:space-between;
    width:400px;
}

But I wanted the first daughter to occupy 100% of the div and the other two to keep the space-between, It is possible to force it to occupy 100% even with Justify-content in parent?

css3 flexbox

1 answer

1


You can force the size without problems:

.pai {
  display: flex;
  justify-content: space-between;
  width: 400px;
  flex-wrap: wrap;
}

.filha {
  background-color: green;
  padding: 1rem;
  margin: 1rem;
  text-align: center;
  width: 100px;
}
.filha:first-of-type {
  width: 100%;
}
<div class="pai">
  <div class="filha">Teste</div>
  <div class="filha">Teste</div>
  <div class="filha">teste</div>
</div>

  • 1

    perfect, it was the missing flex-wrap :)

  • http://www.sketchingwithcss.com/samplechapter/cheatsheet.html and https://css-tricks.com/snippets/css/a-guide-to-flexbox/ are great guides. And don’t forget to mark the answer as correct, if it has solved your problem ;)

Browser other questions tagged css3 flexbox

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