I'm trying to put two flex containers next to each other using flexbox, taking this layout as reference (I want it to be like the first row here, with part of the image on the left inside a box and the other one on the right)
This is my code so far for the two containers:
.chaco-container {
border: $borde-textos;
background-color: #bda89c;
margin: 0;
padding: 1em;
width: 50%;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.plan-container {
background-color: white;
border: $borde-textos;
width: 50%;
display: inline-flex;
}
display: flex; needs to be applied on the parent container. Check out the below example snippet.
.flex-container {
display: flex;
}
.chaco-container {
width: 50%;
background-color: yellow;
}
.plan-container {
width: 50%;
background-color: skyblue;
}
<div class="flex-container">
<div class="chaco-container">...content</div>
<div class="plan-container">...content</div>
</div>
I think you might be facing gap between the two inline flex elements which is resulting to the second element going to the next line.
To fix this:
Use this as a reset:
*{
margin: 0;
padding: 0;
box-sizing:border-box;
}
2)Give negative margin to the plan(second) container:
margin-left:-4px;
(increase the number of negative pixels until both flexboxes are on the same row)
Related
I have three flex items all with different height and different widths.
I want the second and third items to be in relation to the first.
My first item is a image, second a text, third another text
I want my second item to be at the center of the flex box and the third to be at the start of second item. I also want the second item to grow and cover the rem area.
How I want my alignment
This is what I am doing
.box {
display: flex;
justify-content: flex-start;
}
.flex-second-item {
align-self: center;
flex-grow: 1
}
You just need to use different flexboxes for them
body {
display: flex;
gap: 10px;
align-items: center;
}
.one {
width: 100px;
height: 100px;
background: red;
}
.right-side {
display: flex;
gap: 10px;
}
.two {
width: 75px;
height: 75px;
background: red;
}
.three {
width: 50px;
height: 50px;
background: red;
}
<body>
<div class="one"></div>
<div class="right-side">
<div class="two"></div>
<div class="three"></div>
</div>
</body>
Hope it helps.
Regards
You can wrap second and third item in a div, and you display flex them with align-items=flex-start.
So you may try :
.first-box-and-div-which-contains-second-and-third-boxes {
display: flex;
align-items: center;
}
.second-and-third-boxes {
display: flex;
align-items: flex-start;
}
I've made this flexbox table like this:
<div class="flex-row">
<div class="flex-col">
<i class="thumbs-up"></i>
<i>20</i>
</div>
<div class="flex-col">
<i class="thumbs-down"></i>
<i>5</i>
</div>
</div>
scss:
.thumbs-up {
width: 24px;
height: 24px;
&:after {
content: " ";
background: url(https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/collection/build/ionicons/svg/ios-arrow-up.svg) no-repeat;
width: 100%;
height: 100%;
display: block;
}
}
.thumbs-down {
width: 24px;
height: 24px;
&:after {
content: " ";
background: url(https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/collection/build/ionicons/svg/ios-arrow-down.svg) no-repeat;
width: 100%;
height: 100%;
display: block;
}
}
.flex-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 20%;
}
.flex-col {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
text-align: center;
i {
text-align: left;
}
}
Here is the jsfiddle.
As you can see the numbers are not quite center-aligned below the icons.
How can I fix this?
The reason your numbers aren't center-aligned is because:
The i elements within .flex-col have the style text-align: left applied.
The i elements don't have a width set, so take up 100% of the parent element width (.flex-col)
So if you had aligned the text in the center, it would have been in the middle of the column, away from the icon. I've added some debugging borders to elements on this fiddle to try and explain the issue.
To fix this I've added a width to the i element containing the numbers example fiddle solution
An alternative solution would be to set margin: right on the .flex-col elements, removing flex-basis and flex style rules. Then set text-align: center on the i element as above.
see alternative example fiddle
I can't figure out for the life of me how to make this page work.
I'm trying to have the "Top" be a header, the "Bottom" be the footer, and "table" and "section" be two separate columns in between.
Although I can't figure it out. Thanks.
html {
height: 100%;
}
body {
display: flex;
height: 100%;
justify-content: flex-start;
align-content: flex-start;
flex-direction: column;
flex-wrap: wrap;
margin: 0;
}
#pageTop {
background-color: lightgrey;
padding-left: 1em;
padding-top: .5em;
flex-grow: 1;
}
#table {
background-color: blue;
width: 50%;
flex-grow: 8;
flex-shrink: 1;
}
#pageSection {
background-color: lightpink;
width: 50%;
flex-flow: 8;
flex-shrink: 1;
}
#pageBot {
flex-grow: 1;
background-color: grey;
}
<body>
<div id="pageTop">Top</div>
<nav id="table">table</nav>
<div id="pageSection">section</div>
<div id="pagebot">Bottom</div>
</body>
Like Micheal_B stated:
Wrap the #table and the #section in one container. That container becomes the second flex item in the parent flex container. Then add display: flex to the new container.
Changes
Added main#pageContent to body and wrapped it around nav#table and section#pageSection
Added display: flex, justify-content: center, and flex: 2 0 auto
Changed all flex-grow and flex-shrink to flex shorthand.
ex. flex: 0 1 auto = flex-grow: 0 flex-shrink: 1 flex-basis: auto
note. The ruleset above is default for all flex children.
Removed align-content and justify-content; and changed the value of flex-wrap from wrap to nowrap; and added overflow:hidden and width: 100% to normalize a little.
Added width: 100% to everything with the exception of #pageSection and #table.
Added height: 2em to #pageTop and #pageBot(BTW, corrected typo)
Changed all of the tags to it's semantic equivalents.
main#pageContent
Height is set up to take up the freespace that the footer and header leave by height: calc(100% - 4em). This probably overkill since it also has flex: 2 0 auto.
It is a flex container (flex: display) and a flex child (flex: 2 0 auto)
section#pageSection
overflow-x: hidden will prevent any content from busting out of the borders sideways. overflow-y:auto will accommodate any content that extends the bottom border by adding a scrollbar. I have added content (a few <p>) to demonstrate.
SNIPPET
html {
height: 100%;
width: 100%;
}
body {
display: flex;
height: 100%;
width: 100%;
flex-direction: column;
flex-wrap: nowrap;
margin: 0;
overflow: hidden;
}
#pageContent {
width: 100%;
height: calc(100% - 4em);
display: flex;
justify-content: center;
flex: 2 0 auto;
}
#pageTop {
width: 100%;
height: 2em;
background-color: violet;
padding-left: 1em;
padding-top: .5em;
flex: 0 0 auto;
}
#table {
background-color: cornflowerblue;
width: 50%;
flex: 0 0 auto;
}
#pageSection {
background-color: darksalmon;
width: 50%;
flex: 1 0 auto;
overflow-x: hidden;
overflow-y: auto;
}
#pageBot {
width: 100%;
height: 2em;
flex: 0 0 auto;
background-color: gold;
}
<body>
<header id="pageTop">Top</header>
<main id='pageContent'>
<nav id="table">table</nav>
<section id="pageSection">
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.</p>
<p>He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.</p>
<p>His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me? " he thought. It wasn't a dream.</p>
<p>His room, a proper human room although a little too small, lay peacefully between its four familiar walls.</p>
<p>A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame. It showed a lady fitted
out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. Gregor then turned to look out the window at the dull weather. Drops</p>
</section>
</main>
<footer id="pageBot">Bottom</footer>
</body>
Add a div with flex row, as it (adjust cols width with width attribute):
html {
height: 100%;
}
body {
display: flex;
height: 100%;
justify-content: flex-start;
align-content: flex-start;
flex-direction: column;
flex-wrap: wrap;
margin: 0;
}
#pageTop {
background-color: lightgrey;
padding-left: 1em;
padding-top: .5em;
}
#mainContainer {
display: flex;
flex-direction: row;
}
#table {
background-color: blue;
width: 50%;
}
#pageSection {
background-color: lightpink;
width: 50%;
}
#pagebot {
background-color: grey;
}
<body>
<div id="pageTop">Top</div>
<div id="mainContainer">
<nav id="table">table</nav>
<div id="pageSection">section</div>
</div>
<div id="pagebot">Bottom</div>
</body>
PS: I also fixed a pagebot/pageBot variant. Be aware, CSS is case-sensitive.
I've two flexbox columns, but one is just empty and is used as "left margin" for the other column.
http://codepen.io/FezVrasta/pen/MKWvwo
I'd like to avoid to insert in the markup the first column but maybe define to the second column something like
margin-left: flex-1
this should just add a left-margin wide as a "flex 1" unit.
Is there a way?
PS
clarifying for the one that voted to close because unclear.
You have a flexbox with width 300px, inside, you have a column with flex: 1 and one with flex: 2.
The "flex unit" will be 100px (thee are 3 flex units (1 + 2), 300/3= 100)
So, your issue is to clean the DOM and avoid an artificial element.
You can use a pseudo element for this
.flex {
display: flex;
}
.flex:before {
content: "";
background: red;
flex: 1;
}
.two {
background: blue;
flex: 2;
}
<div class="flex">
<div class="two"> 2</div>
</div>
It looks like you want an empty space on the left hand side and you want the second column to be pushed to the right. If this is the case I think you can resolve your issue by adding a width(%) to your second column and add the following property to your container:
.flex-container{
justify-content: flex-end;
}
Get rid of the first column all together.
You can use the justify-content property to get the desired result. You must give a width to the remaining column that, if you want to keep it flexible should be in % units.
.flex{
justify-content: flex-end;
}
.two {
flex-basis: 66%;
}
See codepen: http://codepen.io/anon/pen/YwzxqM
If you have more columns then you have to distribute the 100% width among them and you're done.
You can use flexbox grid which is same as bootstrap grid just with Flexbox
http://flexboxgrid.com/
DEMO
<div class="row">
<div class="col-xs-offset-4 col-xs-8 column"></div>
</div>
So here col-xs-offset-4 behave same as margin-left
So the criteria is that you want the left column to be a "flex-margin" at the constant length of one flex-unit? Take a look and see if I'm grokking* correctly.
http://codepen.io/01/pen/VewzJL
CSS
html,
body {
box-sizing: border-box;
font: 400 16px/1.4 'Source Code Pro';
height: 100vh;
width: 100vw;
}
.flex {
width: 100%;
height: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: baseline;
}
.one {
background: red;
flex: 0 2 25%;
}
.two {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-content: flex-start;
background: blue;
flex: 2 0 75%;
}
.two div {
outline: 1px solid yellow;
background-color: cyan;
min-height: 10%;
height: 1.5em;
flex: 2 1 auto;
}
*That's awesome! The spellcheck accepted "grokking"!
This question already has answers here:
When flexbox items wrap in column mode, container does not grow its width
(9 answers)
Closed 6 years ago.
When using flex box in default row direction, the container height grows to contain all the flex items, even if it is absolutely positioned.
#container {
position: absolute;
display: flex;
flex-wrap: wrap;
}
#container > div {
flex: 0 0 200px;
height: 200px;
}
See http://codepen.io/tamlyn/pen/dPjLoN/?editors=110
However if the flex direction is changed to column, the container collapses to the width of a single flex item, even if the items wrap onto the next column.
#container {
position: absolute;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
#container > div {
flex: 0 0 200px;
width: 200px;
}
See http://codepen.io/tamlyn/pen/rarbeN?editors=110
How can I make the container contain all flex items in column mode?
I've actually found a CSS-only solution to this but it isn't the most perfect thing in the world. Here it is: http://codepen.io/anon/pen/vEPBKK
The trick here is to create a visibility: collapsed container. In flex, visibility: collapsed objects take themselves out of the normal flex flow but retain their dimensions for the purpose of layout. This widens the flex container to the desired width but leaves the flex items unaffected. There are a few caveats, however:
This requires a bit of fiddling. As you can see, the magic <div> is a set width but it uses :nth-child to determine how many boxes are before it. If your actual design breaks at more or less than 3 rows, you'll have to adjust this and you'll most certainly have to adjust the width of the object.
Because of a rendering bug, this does not work in IE. Luckily, IE's incorrect implementation does exactly what you wanted in the first place without any changes so all you have to do is give IE it's own stylesheet with some conditional statements and shoot the div.magic some good old display: none.
HTML
<div id="container">
<div class="fb"></div>
<div class="fb"></div>
<div class="fb"></div>
<div class="fb"></div>
<div class="fb"></div>
<div class="fb"></div>
<div class="fb"></div>
<div class="magic"></div>
</div>
CSS
#container {
position: absolute;
display: flex;
flex-direction: column;
flex-wrap: wrap;
border: 1px solid #f00;
height: 650px;
padding: 1px;
}
#container div.fb {
border: 1px solid #555;
flex: 0 0 200px;
background-color: #ccc;
width: 200px;
margin: 1px;
height: 200px;
}
#container > div.magic {
height: 0;
margin: 0;
padding: 0;
visibility: collapsed;
}
#container > div.magic:nth-child(5),
#container > div.magic:nth-child(6),
#container > div.magic:nth-child(7) {
width: 408px;
}
#container > div.magic:nth-child(8),
#container > div.magic:nth-child(9),
#container > div.magic:nth-child(10) {
width: 612px;
}
#container > div.magic:nth-child(11),
#container > div.magic:nth-child(12),
#container > div.magic:nth-child(13) {
width: 816px;
}
I think this is the CSS you're looking for:
#container {
display: flex;
flex-flow: row wrap;
border: 1px solid #f00;
padding: 1px;
}
#container > * {
border: 1px solid #555;
background-color: #ccc;
height: 200px;
width: 200px;
margin: 1px;
}
The "Container" will always the the width of it's container, in this case the page, but now the boxes will adjust within it properly.
Let me know if I misunderstood your question.
Update
I've been playing with what you're asking for for several days now, and it really seems like it's not possible to do what you're asking... at least not in the direction that you're asking.
The container wants to be the maximum width possible. Unless you force the container to be the exact width, at which point it wont be the full width, but it wont flex with the flexing content either.
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
border: 1px solid #f00;
}
.flex-item {
background-color: #ccc;
padding: 5px;
width: 200px;
height: 150px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
border: 1px solid #555;
}
<div id="container" class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
</div>
The first try I do not understand what you mean
as reference material you can see this tutorial
https://css-tricks.com/snippets/css/a-guide-to-flexbox/