I am trying to align items left while keeping them in a column, however, when I put items in a column, it defaults to re-centering the items on the page.
Here's what I have:
HTML
<div className='postHeader'>
<div>{post.title}</div>
<div>{post.author}</div>
</div>
CSS
.postHeader {
padding-top: 60px;
padding-left: 25px;
display: flex;
justify-content: flex-start;
flex-direction: column;
}
The alignment in the cross-axis (when you have a column flexbox this is the horizontal axis) is determined by the property align-items. (the default value is stretch which causes the flex items to extend all the way to the end of the flexbox container)
Set align-items: flex-start - see demo below:
div {
border: 1px solid;
}
.postHeader {
padding-top: 60px;
padding-left: 25px;
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: flex-start; /* ADDED */
}
<div class='postHeader'>
<div>{post.title}</div>
<div>{post.author}</div>
</div>
The text-align property specifies the horizontal alignment of text in an element.
text-align:left
Add one more property in your CSS snippet with align-items: flex-start
HTML
<div className='postHeader'>
<div>{post.title}</div>
<div>{post.author}</div>
</div>
CSS
.postHeader {
padding-top: 60px;
padding-left: 25px;
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: flex-start; /* ADDED */
}
Related
What property do I need to add to insert spaces between the server icons in the image?
.server-sidebar-div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
You can use the gap property
.server-sidebar-div {
gap: 20px;
}
I'm getting some unexpected behavior with my margins using flex and I would like some help in understanding why.
I'v got some simple html like so:
<div className="dashboard">
<div className="dashboard__inner-container">Inner Container</div>
</div>
And my scss file looks like this:
.dashboard {
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
flex: 1 1 auto;
background-color: #f4f6f8;
}
.dashboard__inner-container {
display: flex;
flex-direction: column;
background-color: #ffffff;
flex: 1 1 auto;
width: 100%;
margin: 100px 50px;
}
What I am expecting is that the inner container will completely fill up the parent container, minus 100px on the top and bottom and 50px on the right and left. The vertical margin works as expected, but the horizontal margin actually extends out of the parent div, so that the inner container still appears to be taking up the entire width of the parent div.
I'm not sure if this is related to flexbox or not.
Here is an isolated CodePen https://codepen.io/MaxMillington2/pen/EQWZoj
When using align-items: center with column direction, the item will collapse to its content width, instead of with its default, stretch, which makes it fill its parent's width.
Additionally, when setting width: 100% to the inner, it will override the default stretch, which will make the item be 100% of parent's width + margin.
For the expected output, remove align-items: center on the outer and width: 100% on inner.
Stack snippet
html {
height: 100%;
overflow: auto;
}
.outer {
display: flex;
justify-content: center;
flex-direction: column;
background-color: #f4f6f8;
height: 100%;
}
.inner {
display: flex;
flex-direction: column;
background-color: #ffffff;
flex: 1 1 auto;
text-align: center;
margin: 100px 80px;
}
<div class='outer'>
outer
<div class='inner'>
inner
</div>
</div>
I am trying to center a red box in the middle of the page.
I have set the flex container to 100% in height, and have also set the html,body to 100%, and it still does not align center.
Can anyone please help me understand why its not working? Thanks!
html, body {
height: 100%;
}
.flex-container {
display: flex;
flex-flow: column;
justify-content: center;
height: 100%;
}
.box {
flex: 0 0 100px;
background: red;
width: 100px;
}
<div class='flex-container'>
<div class='box'></div>
</div>
You use justify-content to align flex items on the main axis.
You use align-items to align flex items on the cross axis.
Since your flex container is flex-direction: column:
the main axis is vertical, and
the cross axis is horizontal.
justify-content: center is working fine.
You just need to add align-items: center.
html, body {
height: 100%;
}
.flex-container {
display: flex;
flex-flow: column;
justify-content: center; /* centers flex items vertically, in this case */
align-items: center; /* NEW */ /* centers flex items horizontally, in this case */
height: 100%
}
.box {
flex: 0 0 100px;
background: red;
width: 100px;
}
<div class='flex-container'>
<div class='box'></div>
</div>
Here's a more detailed explanation:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
You need to add align-items to .flex-container
align-items: center;
See here for an example https://jsfiddle.net/x9gyheo6/1/
Lately I was creating a searchbox for my website, but I wanted it to be constantly centered in every y and x dimension.
I have div container searchbox:
.searchbox {
position: absolute;
text-align: center;
width: 100%;
left: 0%;
top: 55px;
height: 115px;
background-color: black;
}
Inside searchbox container, I made special mover container:
.mover {
margin: 0 auto;
width: 50%;
}
As you see width is 50% because I thought it would center it, but it didn't, and margin is automatic, which I don't think even works without 50% width.
Full code and Result.
I think my style is kinda messed up and there are useless things which may affect automatic margin.
What may the problem be? does margin: auto; doesn't work with current position of div? What do I need to change? If not, what's the problem?
I will be very thankful if you upload solution on my current fiddle.
UPDATED ANSWER
Here is correct code: https://jsfiddle.net/uda77168/7/
First...
1. Removed all absolute, top, left, right, bottom CSS properties.
Reason: Absolute positioning is generally a bad thing to do, because it gives sites an unresponsive layout.
2. I've also removed float CSS properties.
Reason: float is not bad, but it's unnecessary if you're using flexbox.
3. Set .search {width: 100%}
Reason: make the search bar bigger.
4. Removed width properties for #condition and #stattrack.
5. Made the margins more consistent.
6. Placed <label> before <select>.
Center Vertically
1. <body> is the flexbox that will center things vertically. In order for that to work, the width and height for <html> and <body> have to be defined.
html, body {
width:100%;
height:100%;
}
body {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
2. Next, we need to define <body> as a flexbox and give it some flexbox properties:
body {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
You can just copy-paste flexbox code like the one above from here.
Center Horizontally
1. Create a div around .statbox, .conbox, and .rarbox, and give it a width and make it a flexbox (again, the flexbox code is copied):
<div class="horizontal-flexbox"></div>
.horizontal-flexbox {
width: 100%;
display: flex;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
2. I've also set .statbox, .conbox, and .rarbox each to be 33.3% width long. Added together, that's 99.9% – just under 100%.
.horizontal-flexbox > div {
width: 33.3%;
margin-top: 10px;
}
3. I've also included some other stuff, but that's not important. Make sure you learn flexbox, it's real useful!
Your input.search class has a specified width in px which is larger than the container.
.search {
width: 100%;/*changed this line*/
height: 35px;
margin-top: 20px;
margin-left: 0 auto;
margin-right: 0 auto;
border: solid 1px black;
border-radius: 7px;
}
However using percentages can lead to unpredictable layouts when viewed on different screen resolutions.
Use this:
.searchbox {
display:flex;
display:-webkit-flex;
justify-content:center;
-webkit-justify-content:center;
align-items:center;
-webkit-align-items:center;
}
And
.mover{width:50%;}
All of the flexbox tutorials that I've seen so far say that vertical align is done by using align-items and justify-content and setting both to center; however that doesn't seem to be working, as you can see below (I'm trying to align the lorem ipsum text). The browser I'm using is Chrome, if that matters.
Here's a codepen: http://codepen.io/anon/pen/QjBrEm
I've tried a lot of the suggestions here on Stack Overflow, for example:
body, html:
height: 100%
These don't seem to work.
Your SASS should be:
.initial
background-color: #212121
color: #ffffff
display: flex
align-items: center
justify-content: center
to align the content of that element as flexbox layout is not inherited by children.
Codepen Demo
When you create a flex container only the child elements become flex items. Descendants beyond the children do not become flex items and flex properties don't apply to them.
So if you're trying to center the <p> text, you'll notice the <p> is a child of <section>, which is a flex item but not a flex container.
You'll need to make <section> a (nested) flex container so that flex properties apply to the <p>.
Try this:
#mainpage-container section {
width: 100%;
height: 100vh;
text-align: center;
display: flex; /* new */
align-items: center; /* new */
justify-content: center; /* new */
}
DEMO: http://codepen.io/anon/pen/xwJjvO
You have laid out the sections inside of the container using flexbox, and as shown on Codepen this gives the result that all three sections are shown below each other.
The text in the first section is inside section.initial, which is not laid out using flexbox, as that was only specified on the parent. Therefore, the text is just placed according to the default padding and the text-align you entered.
To get the text centered in the section, also start using flexbox layout in that section.
Since you are aligning the paragraph inside the section element, you need to use the flexbox properties on section(parent). Flexbox properties on #mainpage-container will not have effect on the grandchild p as it is not inherited by the parent i.e. section element.
#mainpage-container section.initial {
display: flex;
justify-content: center;
align-items: center;
}
#mainpage-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#mainpage-container section {
width: 100%;
height: 100vh;
text-align: center;
}
#mainpage-container .initial {
background-color: #212121;
color: #ffffff;
font-size: 3rem;
display: flex;
justify-content: center;
align-items: center;
}
#mainpage-container .initial #logo {
height: 15rem;
width: auto;
}
<div id="mainpage-container">
<section class="initial">
<!--<img src="/assets/k.png" id="logo">-->
<p>Lorem ipsum.</p>
</section>
<section>
</section>
<section>
</section>
</div>