I would like to align the content in the 2nd column to look like this:
Currently, it is looking like this:
I believed it has got to do with my flex-grow, flex-shrink and flex-basis. but I am not sure. Here is the JSFiddle. https://jsfiddle.net/onestaryx/c70yg2t9/2/
.work-meta-row{
display: flex;
flex-direction: row;
align-items: flex-start;
align-self: flex-start;
justify-content: flex-start;
line-height: 22px;
flex-wrap: nowrap;
.work-meta-label{
font-weight: bold;
flex-basis: 200px;
}
.work-meta-value{
flex-grow:1;
}
}
This will do the trick:
.work-meta-row{
display: flex;
flex-direction: row;
align-items: flex-start;
align-self: flex-start;
justify-content: flex-start;
line-height: 22px;
flex-wrap: nowrap;
.work-meta-label{
font-weight: bold;
flex: 0 0 200px;
}
}
flex grow and flex shrink are ON i.e. 1 by default. You need to disable it to match the UI you require. This is how you can do it:
`.work-meta-row {
display: flex;
line-height: 22px;
.work-meta-label {
font-weight: bold;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 100px;
}
}`
OR use with the flex shorthand like:
`.work-meta-row {
display: flex;
line-height: 22px;
.work-meta-label {
font-weight: bold;
flex: 0 0 100px;
}
}`
Related
I'm learning how to utilize flex and just started running into issues for after the flexbox is completed...
#initial {
display: flex;
flex: 1;
justify-content: space-evenly;
align-items: center;
width: 1200px;
margin-left: auto;
margin-right: auto;
border: 1px solid white;
}
#initial .menu {
display: flex;
flex: 1;
justify-content: space-evenly;
align-items: center;
margin: 15px auto 15px auto;
width: 1100px;
border: 1px solid rgba(245, 245, 245, 0.699);
border-radius: 50px;
line-height: 2rem;
font-size: 1.1rem;
overflow: hidden;
}
#initial .menu .menuItem {
display: flex;
flex: 1;
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
text-align: center;
flex-direction: column;
flex-wrap: wrap;
align-content: space-around;
justify-content: space-evenly;
}
#initial .menu .menuItem:hover {
background-color: #FDB000;
color: black;
cursor: pointer;
display: flex;
flex: 1;
text-align: center;
flex-direction: column;
flex-wrap: wrap;
align-content: space-around;
justify-content: space-evenly;
}
<div id="initial">
<div class="menu">
<div id="initialMenuHeader" class="menuItem" onclick="menuCollapsable(this)">Δ</div>
<div id="initialMenuHVQ" class="menuItem" onclick="initialHVQ()">Hivecoin</div>
<div id="initialMenuRVN" class="menuItem" onclick="initialRVN()">Ravencoin</div>
<div id="initialMenuAVN" class="menuItem" onclick="initialAVN()">Avian</div>
</div>
<div class="body">
<h1>NAME OF POOL GOES HERE</h1>
<p class="intro">¡Intro crap will go here!</p>
</div>
</div>
As it stands, my .menu looks like this. Please note that the image is uncensored and includes expletives
Everything I could find online suggests that when the flex-box is completed, it should go back to the normal flow (e.g. not floating).
Please let me know what I'm doing wrong and/or missing.
JSFiddle of my code (added some things that I didn't include above like body for background-color and color
Since you make #initial as flex, and by default flex-direction set to row your menu align with with your body. If your want menu & body in 2 lines add below css:
#initial{
flex-direction: column;
}
I have a text in flexbox item .learn--text which needs to be vertically centered, but word-break: break-word rule doesn't work.
This is the current state
and desired state
.learn {
display: flex;
flex: 0 0 50px;
margin-top: auto;
align-items: stretch;
height: 50px;
border: 1px solid black;
width: 250px;
}
.learn--icon {
display: flex;
align-items: center;
justify-content: center;
padding: 0 6px;
}
.learn--text {
display: flex;
flex-wrap: wrap;
align-items: center;
flex: 1;
padding: 0 6px;
white-space: break-spaces;
word-break: break-word;
}
<div class="learn"><div class="learn--icon">icon</div><span class="learn--text">Learn more about content management →
</span></div>
Erase all the flex settings from learn--text - they "divide" its content into two parts, the link and the following text, treating them as flex items and therefore units. If you erase that, the result is as follows:
.learn {
display: flex;
flex: 0 0 50px;
margin-top: auto;
align-items: center;
height: 50px;
border: 1px solid black;
width: 250px;
}
.learn--icon {
display: flex;
align-items: center;
justify-content: center;
padding: 0 6px;
}
.learn--text {
padding: 0 6px;
white-space: break-spaces;
word-break: break-word;
}
<div class="learn"><div class="learn--icon">icon</div><span class="learn--text">Learn more about content management →
</span></div>
This, is the answer:
.learn {
display: flex;
flex: 0 0 70px;
margin-top: auto;
align-items: center;
height: 70px;
border: 1px solid black;
width: 250px;
}
.learn--icon {
display: flex;
align-items: center;
justify-content: center;
padding: 0 6px;
}
.learn--text {
display: inline-block;
flex-wrap: wrap;
align-items: center;
flex: 1;
padding: 0 6px;
white-space: break-spaces;
word-break: break-word;
overflow-wrap: break-word;
overflow: hidden;
}
<div class="learn"><div class="learn--icon">icon</div><span class="learn--text">Learn more about content management →
</span></div>
I want to make a three columns layout for my website using flexboxes.
However, my 'commentCaMarche' div does not seem to follow the flex order, it is located at the top of the 'details-index' column. Do you know how to solve this problem?
#credits {
font-family: 'Roboto Condensed', sans-serif;
color: #FFFFFF;
height: 100vh;
background-color: #FB3D00;
margin-bottom: 0;
}
#columns {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
#details-index {
font-size: 1.6vmin;
text-align: center;
flex: 1;
order: 1;
display: flex; /*Note : Each of my columns is also a flex container for other contents I omitted*/
flex-direction: column;
justify-content: space-around;
}
(...)
#commentCaMarche {
font-size: 2vmin;
text-align: center;
flex: 1;
order: 2;
display: flex;
flex-direction: column;
justify-content: space-around;
}
(...)
#sources {
font-size: 1.4vmin;
text-align: center;
flex: 1;
order: 3;
display: flex;
flex-direction: column;
justify-content: space-around;
}
<div id='credits'>
<div id='columns'>
<div id='commentCaMarche'>
<h2>Comment ça marche</h2> (...)
</div>
<div id='details-index'>
<h2>Le détail</h2> (...)
</div>
<div id='sources'>
<h2>Sources des données</h2> (...)
</div>
</div>
</div>
Here is the css for making it responsive 3 column
#columns{width:100%; float:left;}
#commentCaMarche{width:33.33%; float:left}
#details-index{width:33.33%; float:left}
#sources{width:33.33%; float:left}
You need to change order property for your flex columns. JSfiddle
#details-index {
font-size: 1.6vmin;
text-align: center;
flex: 1;
order: 2;
display: flex; /*Note : Each of my columns is also a flex container for other contents I omitted*/
flex-direction: column;
justify-content: space-around;
}
#commentCaMarche {
font-size: 2vmin;
text-align: center;
flex: 1;
order: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
}
The flex-wrap: wrap will make your columns break line when they doesn't fit the width available, so by removing it from the columns rule, you'll have 3 proper columns at any width.
I also temporarily removed the order from the flex items, so they show up in the same order they are placed in the markup, but if you need to change them like in your sample, please add it back, or why not simply swap them in the markup
#credits {
font-family: 'Roboto Condensed', sans-serif;
color: #FFFFFF;
height: 100vh;
background-color: #FB3D00;
margin-bottom: 0;
}
#columns {
display: flex;
justify-content: space-between;
}
#details-index {
font-size: 1.6vmin;
text-align: center;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
}
#commentCaMarche {
font-size: 2vmin;
text-align: center;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
}
#sources {
font-size: 1.4vmin;
text-align: center;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
}
<div id='credits'>
<div id='columns'>
<div id='commentCaMarche'>
<h2>Comment ça marche</h2>
(...)
</div>
<div id='details-index'>
<h2>Le détail</h2>
(...)
</div>
<div id='sources'>
<h2>Sources des données</h2>
(...)
</div>
</div>
</div>
I am using flex for making a searchbar/input element stay centered and change width as the screen size changes.
This is my html:
<div class="flex-container">
<div class="flex-row">
<h1 class="brandname">Hello</h1>
</div>
<div class="flex-row">
<form>
<!-- <div class="search centered"> -->
<div class="search">
<div class="input-container">
<input type="text" name="query" class="searchbar" />
<button type="submit" class="search-button">Search</button>
</div>
</div>
</form>
</div>
</div>
and this is my css:
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.flex-container{
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;
-webkit-flex-direction: row;
flex-direction: row;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}
.flex-row {
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
flex: 1;
-webkit-flex: 1;
}
form{
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
flex: 1;
-webkit-flex: 1;
}
.search{
display: flex;
display: -webkit-flex;
flex: 0 1 455px;
-webkit-flex: 0 1 455px;
}
.input-container{
display: flex;
display: -webkit-flex;
flex: 1;
-webkit-flex: 1;
min-width: 0;
}
.searchbar{
flex: 1;
-webkit-flex: 1;
min-width: 0;
}
.flex-container > .flex-row:first-child{
flex: 0 1 100%;
-webkit-flex: 0 1 100%;
}
.brandname {
position: relative;
font-size: 500%;
font-family: 'Lato', sans-serif;
color: #1f0e3e;
text-align: center;
margin-bottom: 30px;
margin-top: 5%;
}
body {
margin: 10px;
}
.input-container{
/*float: left;*/
/*display: block;*/
flex: 1;
-webkit-flex: 1;
outline-style: solid;
outline-color: #e3e3e3;
outline-width: 1px;
}
.searchbar{
margin-left: 5px;
}
.search button {
background-color: rgba(152,111,165,0.38);
background-repeat:no-repeat;
border: none;
cursor:pointer;
border-radius: 0px;
/*overflow: hidden;*/
outline-width: 1px;
outline-style: solid;
outline-color: #e3e3e3;
color: white;
}
.search input{
outline-width: 0px;
outline-style: none;
border-width: 0px;
}
and it works in chrome, ie edge and in this fiddle, but not in safari.
In Safari the searchbar goes above the .brandname element and to the right of it and takes a width of 150px.
any ideas on how to make this work in safari?
One thing that is not working is the the first flex row width of 100% is not working. In safari it is making the two felx-row elements be right next to each other and both of them together are taking 100% of the width.
I changed .flex-row css rules to:
.flex-row {
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
flex: 1;
-webkit-flex: 0 1 100%;
}
and changed the flex-row first child css rules to:
.flex-container > .flex-row:first-child{
flex: 0 1 100%;
-webkit-flex: 0 1 auto;
}
and then it works.
I thought about doing this after reading that flex-wrap is buggy in safari from this SO question which suggests that setting flex-wrap in safari is buggy
Always use the non-prefixed setting last in your CSS rules. In your first rule that would be:
.flex-container{
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
similar for all other rules.
Here is the base fiddle:
html, body {
height: 100%;
margin: 0;
padding: 0;
color: white;
}
header {
background-color: red;
}
main {
background-color: green;
}
footer {
background-color: blue;
}
http://jsfiddle.net/lzhelenin/2j0yzuoe/
What I want is to make /main/ grow if there's enough free space
http://joxi.ru/BA0dpaVcqQqMAy
I know that it's possible to do it using flexboxes:
html, body {
height: 100%;
margin: 0;
padding: 0;
color: white;
}
#wrapper {
height:100%;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-align-content: space-around;
-ms-flex-line-pack: distribute;
align-content: space-around;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
header {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
background-color: red;
}
main {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
background-color: green;
}
footer {
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
background-color: blue;
}
http://jsfiddle.net/lzhelenin/2j0yzuoe/1/
The result looks exactly the way I want but I think it's not a really cross-browser solution. Is it possible to do it an another way (notice that I can't use fixed height)?
This is easy enough, you need one column of three rows, check my answer on question how-to-build-flexible-structure.
Generally speaking:
one flexible column (display: flex; justify-content: space-between; flex-direction: column)
row one flexed child with fixed height (height: y-value-1)
row two flexed child being stretched (flex: 1)
row three flexed child with fixed height (height: y-value-2)
And if you want evenly distributed rows, make them all (flex: 1)