I want to have a centered flex column layout with some items inside in a row with space between them.
html:
<div class="flex">
<h1>Welcome</h1>
<p>
Before you start there's a short introduction
</p>
<p>
<b>Do you want to see it?</b>
</p>
<div class="flex-row">
<span><b>Skip</b></span>
<button>Start</button>
</div>
</div>
css:
.flex {
display: flex;
flex-direction: column;
align-items: center;
}
.flex-row {
display: flex;
flex-direction: row;
justify-content: space-between;
}
The problem is the flex-row space-between doesn't work while the parent container has align-items: center and I can't figure out to how ignore it for the flex-row.
Try switching
align-items: center;
with
text-align: center;
but since
justify-content: space-between;
gives you the max space you can have between two items try adjusting the width of the site.
Related
I'm trying to set the search bar width for user search to 100%, but the code I've tried doesn't work when entered into the CSS.
This is the code I've tried to input into the CSS:
.um-directory .um-member-directory-header .um-member-directory-header-row .um-member-directory-search-line {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
width: 100%;
}
But this is unsuccessful.
How can I achieve this?
Here's the page: https://slapperoni.com/members/
How about giving flex: 1 to the input element?
https://developer.mozilla.org/en-US/docs/Web/CSS/flex
<div style="
display: flex;
align-items: center;
gap: 8px;
padding: 10px;
">
<input style="flex: 1;">
<button>test</button>
</div>
Hope this helps you.
Consider the following HTML code:
<div class="ungrouped-ordered-item">
<div class="information-container">
<div class="originating-order-id"> #00019405 </div>
<div class="placed-by"> Placed by: 18175 </div>
</div>
<div class="indicator-container">
<div class="indicator"> Unpaid </div>
<div class="indicator" >Pending </div>
</div>
</div>
with the following css:
.ungrouped-ordered-item {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.information-container {
display: flex;
flex-direction: column;
}
.indicator-container {
display: flex;
flex-direction: row;
align-items: center;
}
.indicator-container .indicator {
display: flex;
justify-content: space-between;
align-items: center;
flex: 1;
padding: 0 10px;
border: 1px solid #2e2240;
}
The design I am aiming for, is:
to let the outermost flex containers (.ungrouped-ordered-item) children, grow as they need, and leave space between them, so that they are aligned to the left and right respectively of their containers
to make the children of the inner flex container (.indicator-container .indicator) be equal-width, by taking up the width of the wider element (in this case, it being the element with the text "Pending")
My first goal is achieved, but it seems, that even if adding flex: 1 to the .indicator containers, the browser will not correctly calculate the width of the two elements, and they will have uneven widths. I am presuming that this is because that their container, .indicator-container, has a fluid width. Am I right in this? How can I achieve my desired effect with all fluid width containers? (preferably without javascript).
Here's a fiddle also!
What is the argument against a width:50% for the .indicatorbox?
.ungrouped-ordered-item {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.information-container {
display: flex;
flex-direction: column;
}
.indicator-container {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
}
.indicator-container > * {
border: 1px solid #2e2240;
padding: 0 10px;
flex-wrap: wrap;
}
.indicator-container .indicator {
width: 50%;
text-align: center;
}
<div class="ungrouped-ordered-item">
<div class="information-container">
<div class="originating-order-id"> #00019405 </div>
<div class="placed-by"> Placed by: 18175 </div>
</div>
<div class="indicator-container">
<div class="indicator"> Unpaid </div>
<div class="indicator" >Pending long long</div>
</div>
</div>
Changing the .indicator-container class from flex to grid and using automatic columns solves my problem. Although, it doesn't have as much coverage as flex, for my needs, this works:
.indicator-container {
display: grid;
grid-auto-columns: minmax(0, 1fr);
grid-auto-flow: column;
}
Here's the updated fiddle also.
I can't manage to place in a row horizontal 2 images by using flex. I made sure there was enough space in the parent element.
They will just remain in column.
.card {
width: 50%;
height: 90%;
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
}
<div class="card">
<img src={htmlLogo} alt="html" width="72px" height="72px">
<img src={cssLogo} alt="css" width="53px" height="74px">
</div>
It aligns horizontally.
.card{
width: 50%;
height: 90%;
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
}
<div className="card">
<img src="https://via.placeholder.com/72" alt="html" width="72px" height="72px"></img>
<img src="https://via.placeholder.com/53x74.png" alt="css" width="53px" height="74px"></img>
</div>
Are you trying to get the images to stack on top of eachother?
If that's the case, you can try flex-direction: column;
.card {
width: 50%;
height: 90%;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
<div class="card">
<img src={htmlLogo} alt="html" width="72px" height="72px">
<img src={cssLogo} alt="css" width="53px" height="74px">
</div>
I figured it out, react was actually not happy with the className "card".
I don't know why because i'm not using this class anywhere else.
Maybe created a conflict with Bootstrap?
Anyway, thanks guys for the help!
I'm attempting to center the flex items, however I must be doing something wrong because it isn't working. The basic outline is that Timeline-Container holds 3 smaller containers (TL-1,TL-2, etc). Everything is working fine between the parent container and the children container (meaning that all the TL-# containers are centered correctly with flex), however none of the items within the TL-# containers are centering.
I've tried "justify-content: center;" and it isn't affecting anything.
<div id="Timeline-Container">
<div id="TL-1">
<img src="Photos/2018 SB Photos/Lighted_Stadium_1.JPG">
<p>Caption 1</p>
</div>
<div id="TL-2">
<img src="Photos/2018 SB Photos/Lighted_Stadium_2.JPG">
<p>Caption 2</p>
</div>
<div id="TL-3">
<img src="Photos/2018 SB Photos/Lighted_Stadium_3.JPG">
<p>Caption 3</p>
</div>
</div>
#Timeline-Container {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
}
#Timeline-Container img {
height: 35%;
width: 35%;
border: 5px solid #cccccc;
}
#TL-1 {
/*Parent Flex Code*/
display: flex;
flex-direction: column;
justify-content: center;
align-items; center;
/*Child Flex Code*/
order: 1;
}
#TL-2 {
/*Parent Flex Code*/
display: flex;
flex-direction: column;
justify-content: center;
align-items; center;
/*Child Flex Code*/
order: 2;
}
#TL-3 {
/*Parent Flex Code*/
display: flex;
flex-direction: column;
justify-content: center;
align-items; center;
/*Child Flex Code*/
order: 3;
}
You have a typo align-items; center; which has a semi-colon instead of align-items: center; which has a colon. Here is a code pen: https://codepen.io/the_legitTDM/pen/NQXPWv
FYI: There is added margin for better viewing
The justify-content rule only works on actual flex items. Flex items are elements whose immediate parent has display: flex; set. So if you want to center the content in your #TL-? items usinf flexbox rules, you will need to add display: flex to them as well.
My favorite flexbox resource, helps the concepts just make sense: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Please expand the jsfiddle to see box in action, http://jsfiddle.net/5fp37/.
I want the blue border boxes to align side by side, but I dont want to mention a width to the boxes.
This fiddle works ok but as soon as I remove the width:400px, both boxes get on top/bottom of each other. Any clue?
dont want to specifiy width of any thing. board or box. just a minimum width of box, because ther could be unkown number of boxes. and each would alight side by side
Nor want the divs to change position when page is re sized. verticals always align vertically and horizontals always align horizontally regardless of parent or child items / width.
Vertical boxes go side by side and horizontal ones go top/bottom of each other. Regardless of container size or number of their own children (task divs in this case)
It seems like impossible. Is there a way?
wanted to do this:
http://leankit.com/blog/2010/12/10-kanban-boards-leankit-kanban-style/
.board{
display:block;
margin-right:5px;
margin-left:5px;
margin-top:10px;
margin-bottom:10px;
border: red solid thin;
min-height:510px;
}
.box{
margin-right:5px;
margin-left:5px;
margin-top:10px;
margin-bottom:10px;
border: blue solid thin;
min-height:500px;
min-width:160;
width:400px;
}
.box-virtical{
display:inline-block;
float:left;
}
.box-horizontal{
display:block;
}
.task{
margin-right:5px;
margin-left:5px;
margin-top:10px;
margin-bottom:10px;
display:block;
float: left;
border: green solid thin;
width:150px;
height:100px;
}
<div class="board">
<div class="box box-virtical">
<div class="task">
</div>
<div class="task">
</div>
<div class="task">
</div>
<div class="task">
</div>
<div class="task">
</div>
</div>
<div class="box box-virtical">
<div class="task">
</div>
<div class="task">
</div>
<div class="task">
</div>
<div class="task">
</div>
<div class="task">
</div>
</div>
</div>
Use flex-box.
demo
.board{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: start;
-moz-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: start;
-moz-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
I used this generator
I don't hink that what you try to acheive is possible using float. The problem with floating elements is that they first of all take the width they need displaying their contents if you don't specify one. So your green boxes will be aligned first. It than checks if two green boxes can be floated next to each other.
What you might try is using display: table, table-row and table-cell. See my fiddle-update for the changes http://jsfiddle.net/5fp37/5/
Please check if the browser support is enough for you (no internet explorer 7 and below)
The benefit of it: it stretches automatically like every table and you can use vertical-align: middle inside of it for vertical alignment.
.board {
display: table;
width: 100%;
}
.boardrow {
display: table-row;
}
.box{
display: table-cell;
}