Changing the size of individual element in flexbox

Related searches

How can I stretch the items inside a div to fill the area, and is it possible to have the items in different sizes without having to modify individually using :nth-child(x). For instance: first, third and fifth item to be twice as big as second and fourth item?

.my_class_a {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
<div class="my_class_a">
   <div class="item">a</div>
   <div class="item">b</div>
   <div class="item">c</div>
   <div class="item">d</div>
   <div class="item">e</div>
</div>

How can I stretch the items inside a div to fill the area...

Use the flex-grow property.

and is it possible to have the items in different sizes without having to modify individually using :nth-child(x).

How is the browser supposed to know what you want if you don't define the behavior?

For instance: first, third and fifth item to be twice as big as second and fourth item?

In this case, you can use the even and odd functions of the nth-child() pseudo class.

.my_class_a {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.item:nth-child(odd) {
  flex-grow: 2;
  background-color: lightgreen; /* for demo only */
}

.item:nth-child(even) {
  flex-grow: 1;
  background-color: orange; /* for demo only */
}

/* for aligning item content */
.item {
  display: flex;
  align-items: center;
  justify-content: center;
}
<div class="my_class_a">
  <div class="item">a</div>
  <div class="item">b</div>
  <div class="item">c</div>
  <div class="item">d</div>
  <div class="item">e</div>
</div>

Setting Flex Items Dimensions and order, When it comes to size, flex items inside a flex container behave in a "flex box" kind of flex items mainly rests on the flex property, added to each individual flex item. Lets say we have a <main> element with 3 items inside it- an <article> , a � Flexbox’s sizing properties also have a shorthand called flex. The flex property abbreviates flex-grow , flex-shrink , and flex-basis in the following way: /* Longhand form of default values */ .item { flex-grow: 0; flex-shrink: 1; flex-basis: auto; } /* Shorthand form of default values */ .item { flex: 0 1 auto; }

In general you can use flex-grow: 1; to allow flex items to become larger. (Note that i defined a width for the container, otherwise they won't grow)

Concerning your wish about the 2nd, 4th etc. item: You need to define * somewhere* which items should grow and which not, so you you need at least some kind of selector for them.

.my_class_a {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  align-items: center;
}

.item {
  border: 1px solid #333;
  flex-grow: 1;
  padding: 12px;
  text-align: center;
}
<div class="my_class_a">
  <div class="item">a</div>
  <div class="item">b</div>
  <div class="item">c<br>c</div>
  <div class="item">d</div>
  <div class="item">e</div>
</div>

Controlling Ratios of Flex Items Along the Main Axis, How do we control the size of our flex items, and what choices is the browser with a lot of text when the next door item only contains a single word. If we set flex-basis to 0 and flex-grow to 1 then all of our boxes have no� Controlling the size of flex items mainly rests on the flex property, added to each individual flex item. The most common way to this property is to set it to an integer to define the flex item's size as a portion of the total width.

You can use the flex style declaration - it's a shorthand for:

flex-grow | flex-shrink | flex-basis

where flex-basis is the initial width of the flexbox child and flex-grow and flex-shrink determine how quickly the flexbox child will grow or shrink relative to its siblings.

For instance:

an element with flex: 2 2 100px starts with a width of 100px and will grow or shrink twice as fast as flex: 1 1 50px which starts with a width of 50px.

Working Example:

.my_class_a {
display: flex;
width: 100%;
align-items: center;
}

.item {
color: rgb(255, 255, 255);
text-align: center;
font-weight: bold;
}

.item-a,
.item-c,
.item-e {
flex: 2 2 100px;
background-color: rgb(255, 0, 0); 
}

.item-b,
.item-d {
flex: 1 1 50px;
background-color: rgb(0, 0, 0);
}
<div class="my_class_a">
   <div class="item item-a">a</div>
   <div class="item item-b">b</div>
   <div class="item item-c">c</div>
   <div class="item item-d">d</div>
   <div class="item item-e">e</div>
</div>

Flexbox: How Big Is That Flexible Box? — Smashing Magazine, This defines the default size of an element before the remaining space is that you use this shorthand property rather than set the individual properties. Cross-size: The width or height of a flex item, whichever is in the cross dimension, is the item’s cross size. The cross size property is whichever of ‘width’ or ‘height’ that is in the cross dimension. Before starting with the flexbox properties we should understand which properties meant for flex container and flex items

A Complete Guide to Flexbox, Now let's say you reach for flexbox to make it happen. Setting the parent element to display: flex; is a good first start. .container { display� I was wondering if there is a way to override alignment along main axis for individual element. Something like this: In the picture above, all the elements have align-items: flex-start, except of the last one, which needs to be aligned as flex-end, or space-around.

Making width and flexible items play nice together, Before the Flexbox Layout module, there were four layout modes: Block, for sections in a webpage; Inline, for text; Table, for two-dimensional table data; Positioned, for explicit position of an element; The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

However, with the inclusion of that simple one-liner, display:flex, you can immediately see a change in layout. The list elements are now stacked horizontally, from left to right. Just like they would if you used float. Flexbox enabled. The Flexbox model kicks in as soon as you introduce the “flex display” on any parent element.

Comments
  • very very helpful, didn't knew at all about this pseudo class "odd" and "even".
  • How to center the inner div, of class item such that it will be always centered both vertically and horizontally?
  • That wasn't your question (which i already answered...), but: Either use text-align: content (if it's only text) or you need to use a seperate div inside the flex-items, which you center using one of the usual methods for centering. Vertical centering can be achieved using align-items: centeron the flex parent. (see also the code in my edited answer)