CODEWITHSUNDEEP
htmlcssflexbox
mana
mana

Reputation: 1239

Flex direction row with its content to centre

How can I move the content of class ".content" to the centre of its parent class ".primary"? I did try to set a "width:10px" but it doesn't do anything. All I want, is for the children "div" of parent class ".primary" to move to its centre with a specific width. Right now, they spread across its parent width;

.container {
  display:flex;
  flex-flow:row;
  flex-wrap: wrap;
}

.item {
  border:1px solid red;
  padding:5px;
  width:200px;
  flex-grow:1;
}

.border {
  border:1px solid blue;
}

.primary {
  order:-1;
  flex-basis: 100%;
  display:flex;
  flex-direction:row;
}

.content {
  flex-grow:1;
  border:1px solid blue;
  width:10px;
}
<div class="container">
  <div class="item"> Box 1 </div>
  <div class="border"></div>
  <div class="item"> Box 2 with medium width</div>
  <div class="border"></div>
  <div class="item primary"> 
   <div class="content">Content 1 </div>
   <div class="content">Content 2 </div>
   <div class="content">Content 3</div>
  </div>
</div>

Upvotes: 0

Views: 39

Answers (2)

VSM
VSM

Reputation: 1785

Here I have adjusted content div width by applying flex-basis: 20%; and remove flex-grow:1; from .content class. The reason here is flex-grow:1; grows element width to fullwidth of it's parent element. And also add justify-content: center; for .primary class, which makes .content boxes center aligned.

.container {
  display:flex;
  flex-flow:row;
  flex-wrap: wrap;
}

.item {
  border:1px solid red;
  padding:5px;
  width:200px;
  flex-grow:1;
}

.border {
  border:1px solid blue;
}

.primary {
  order:-1;
  flex-basis: 100%;
  display:flex;
  flex-direction:row;
  justify-content: center;
}

.content {
  /*flex-grow:1;*/
  flex-basis: 20%;
  border:1px solid blue;
  width:10px;
}
<div class="container">
  <div class="item"> Box 1 </div>
  <div class="border"></div>
  <div class="item"> Box 2 with medium width</div>
  <div class="border"></div>
  <div class="item primary"> 
   <div class="content">Content 1 </div>
   <div class="content">Content 2 </div>
   <div class="content">Content 3</div>
  </div>
</div>

Upvotes: 1

hawkstrider
hawkstrider

Reputation: 4341

To align items in a flex container you should use justify-content. That being said, with flex-grow set to 1 your items will ignore your width setting and grow to fill the parent. Below is an example with the width of 10px and aligned to the center

.container {
  display:flex;
  flex-flow:row;
  flex-wrap: wrap;
}

.item {
  border:1px solid red;
  padding:5px;
  width:200px;
  flex-grow:1;
}

.border {
  border:1px solid blue;
}

.primary {
  order:-1;
  flex-basis: 100%;
  display:flex;
  flex-direction:row;
  justify-content: center;
}

.content {
  border:1px solid blue;
  width:10px;
}
<div class="container">
  <div class="item"> Box 1 </div>
  <div class="border"></div>
  <div class="item"> Box 2 with medium width</div>
  <div class="border"></div>
  <div class="item primary"> 
   <div class="content">Content 1 </div>
   <div class="content">Content 2 </div>
   <div class="content">Content 3</div>
  </div>
</div>

Upvotes: 3

Related Questions