Flexbox with One Fixed Column Width

How can I have two fixed width columns with one flexible column in the center?

Instead of using width (which is a suggestion when using flexbox), you could use flex: 0 0 230px; which means:

• 0 = don't grow (shorthand for flex-grow)
• 0 = don't shrink (shorthand for flex-shrink)
• 230px = start at 230px (shorthand for flex-basis)

which means: always be 230px.

See fiddle, thanks @TylerH

Oh, and you don't need the justify-content and align-items here.

img {
    max-width: 100%;
}
#container {
    display: flex;
    x-justify-content: space-around;
    x-align-items: stretch;
    max-width: 1200px;
}
.column.left {
    width: 230px;
    flex: 0 0 230px;
}
.column.right {
    width: 230px;
    flex: 0 0 230px;
    border-left: 1px solid #eee;
}
.column.center {
    border-left: 1px solid #eee;
}

Flexbox with one fixed column width

Instead of setting width in % on right column you can just use flex: 1 and it will take rest of free width in a row.

.flex_container {  display: flex;  width: 100%;}.flex_item_left {  width: 200px;  background: lightgreen;}.flex_item_right {  flex: 1;  background: lightblue;}

<div class="flex_container">  <div class="flex_item_left">    .....  </div>  <div class="flex_item_right">    .....  </div>  <div>

How to set a fixed width column with CSS flexbox

You should use the flex or flex-basis property rather than width. Read more on MDN.

.flexbox .red {
  flex: 0 0 25em;
}

The flex CSS property is a shorthand property specifying the ability of a flex item to alter its dimensions to fill available space. It contains:

flex-grow: 0;     /* do not grow   - initial value: 0 */
flex-shrink: 0;   /* do not shrink - initial value: 1 */
flex-basis: 25em; /* width/height  - initial value: auto */

---

A simple demo shows how to set the first column to 50px fixed width.

.flexbox {  display: flex;}.red {  background: red;  flex: 0 0 50px;}.green {  background: green;  flex: 1;}.blue {  background: blue;  flex: 1;}

<div class="flexbox">  <div class="red">1</div>  <div class="green">2</div>  <div class="blue">3</div></div>

Using flexbox, can I have 1 fixed-width column and 1 column that takes the rest of the width?

Yes, set the fixed column to flex-grow: 0 (so it doesn't grow), flex-shrink: 0 (so it doesn't shrink), and flex-basis: 300px (so it stays fixed at 300px).

jsFiddle demo

.specific-image-container {    display: flex;}.specific-image-column {    flex: 1;    background-color: blue;}.more-images-column {    flex: 0 0 300px; /* new */    background-color: red;}.content {  height: 300px;}

<div class="specific-image-container">
  <div class="specific-image-column">    <div class='content'></div>  </div>
  <div class="more-images-column">    <div class='content'></div>  </div>
</div>

Flex with one fixed width column and one fluid column that must fill the remaining space

Using the flex shorthand property you can use flex: 1 on .col2 which specifies a flex-grow value. You could also as @Yousaf mentioned, explicitly define the flex-grow value by using flex-grow: 1.

The flex-grow CSS property sets the flex grow factor of a flex item's main size. In other words, flex-grow makes a flex item occupy all of the free space on the main-axis.

.container {
  display: flex;
  border: 1px solid blue;
}

.col1 {
  height: 100px;
  flex: 0 0 80px;
  background: red;
}

.col2 {
  height: 100px;
  background: green;
  flex: 1;
  /* flex-grow: 1; This also works! */
}

<div class="container">
  <div class="col1"></div>
  <div class="col2"></div>
</div>

Make CSS FlexBox take fixed column width

It is but you have to tweak some things.

Firstly, you have to set a width on your form not a min-width then set your :focus size to whatever is required.

However, input elements have a minimum size of 20 that has to be overridden in the HTML for the true effect to work.

An input element without a set width get its size from its size attribute, which defaults to 20.

* {  margin: 0;  padding: 0;  box-sizing: border-box;}
#testForm {  padding: 0;  display: flex;  width: 600px;  border: 1px solid grey;}
input {  flex: 1;  min-width: 0;  margin: 0;  border: none;}
#input1 {  background: red;  transition: all .5s ease;}
#input2 {  background: blue;  transition: all .5s ease;}
#input1:focus {  flex: 20;}
#input2:focus {  flex: 20;}

<form id="testForm">  <input type="text" id="input1" size="5">  <input type="text" id="input2" size="5"></form>

css flexbox 3-column layout where first is fixed width

You simply need to specify a fixed width to the first one and then set flex:1 to the other so they take the remaining space and fill 100% of the container space:

.wrapper {  display: flex;  flex-direction: row;}

.col {  flex: 1;  background: red;}.col:first-child {  width: 100px; /* Or a percentage value */  flex:initial;  background: green;}

<div class="wrapper">  <div class="col">1</div>  <div class="col">2</div>  <div class="col">3</div></div>

---

Related Topics