CODEWITHSUNDEEP
cssflexbox
Ilya Chernomordik
Ilya Chernomordik

Reputation: 30205

How to exclude a div (flex item) from flex calculations?

I have an html layout that I cannot modify since it's a 3d party library.

I have four divs and I want them to be inside a flexbox like that:

1------2------3

(where 2 is in the center and 4 is not visible at all).

I have created an example here.

It seems that it mostly work as I want to apart from the fact that the last div messes up the center position of the item number 2. Is there a way I can completely "exclude" it from the flex array by css even though it is in HTML?

.fc-toolbar {
	background-color: #7CC2DD;
	color: white;
	height: 5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.fc-left {
	order: 0;	
}

.fc-right {
	order: 2;
}

.fc-center {
	order: 1;
}

.fc-clear {

}
<div class="fc-toolbar">
  <div class="fc-left">
    <button type="button">
      <
    </button></div>
  <div class="fc-right">
    <button type="button">
          >
    </button>
  </div>

  <div class="fc-center">
    <h2>May 2016</h2>
  </div>
  <div class="fc-clear"></div>
</div>

Upvotes: 21

Views: 35622

Answers (1)

fabio.sang
fabio.sang

Reputation: 905

You can give the element position: absolute and it will be taken out of the flow, just as you would do with a non-flex element.

You can find the updated jsfiddle here.

Upvotes: 21

Related Questions