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 forflex-grow
)0
= don't shrink (shorthand forflex-shrink
)230px
= start at230px
(shorthand forflex-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>
CSS Flex: Two columns with fixed width and remaining two columns with relative wdith
This will help you.
.col3, .col4 {
min-width: 200px;
}
this is a revision ( and rule max-width
has no auto
parameter ):
.col1,
.col2 {
width: 50%;
max-width: 0;
}
.col3,
.col4 {
min-width: 120px;
max-width: 200px;
}
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>
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 2 columns how to keep the first item's width the same when window is resized
Use the property flex directly. The documentation shows that is possible pass up three parameters to flex.
The flex property may be specified using one, two, or three values.
For more details of use and flex#syntax
.container {
display: flex;
}
.left {
border: 1px solid red;
flex: 0 0 400px;
}
.right {
border: 1px solid blue;
flex: 1 0;
}
<div class="container">
<div class="left">
left aligned column
</div>
<div class="right">
I want the right column to take up the rest of the space while keeping the left item's width when the window is resized
</div>
</div>
<div class="container">
<div class="left">
left aligned column
</div>
<div class="right">
short text
</div>
</div>
Flex 2 columns where one is fixed width and the other is width 100%
You can use flex-grow:1;
instead of width:100%;
, and you need to change of few other things as well
Use border directly on #left-container and add margin
instead of padding
, this will make the space equal to all sides.
See updated fiddle
body,html { height: 100%; margin: 0;}
#container { display: flex; flex-direction: row; height: 100%;}
#left-container { flex-grow: 1; border: 20px solid black; margin: 50px;}
#left { height: 100%;}
#right { width: 300px; border-left: 1px solid black;}
<div id="container"> <div id="left-container"> <div id="left"> <p> Some content here </p> <p> Some content here </p> <p> Some content here </p> </div> </div> <div id="right"> <p> Right sidebar </p> </div></div>
Related Topics
Setting Transform-Origin on Svg Group Not Working in Firefox
What Values Can Appear in the "Selected" Attribute of the "Option" Tag
Assign an Initial Value to Radio Button as Checked
Hide Vertical Scrollbar in ≪Select≫ Element
How to Stream Audio/Video Files Such as Mp3, Mp4, Avi, etc Using a Servlet
What Are the Allowed Tags Inside a ≪Li≫
Color of Stacked Semi-Transparent Boxes Depends on Order
What Does It Mean in HTML 5 When an Attribute Is a Boolean Attribute
Absolute Position Is Not Working
Xpath to Match @Class Value and Element Value
Apply Style to Parent If It Has Child With Css
Multiple ≪Html≫≪Body≫ ≪/Html≫≪/Body≫ in Same File