I've created a flex container like this
And this is the CSS for the flex container
.flexcontainer {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-justify-content: center;
justify-content: center;
}
So, I would like to know is it possible to change the place of the first flex item to left using the flex properties?
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 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 */
}
I have a menu with list item displayed in a vertical list using flexbox and flex-direction:column.
It's working great in all browsers except for IE and Edge.
I tried tricks like adding display flex to the flex container but it's not working either.
Any ideas ?
Here's the website where the problem happens : http://lesdeuxvagues.com/demo
Click the plus button in the menu to see the problem
CSS:
ul{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
}
Turns out i just fixed the issue by adding display:block; to my list items.
They had a display:table-cell from the foundation framework that might have caused this problem!
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>
Flexbox seems to have a bug when you try to override a previous applied justify content parameter. What I want to do is justify content centered, but after a certain width apply a media query to the same item to justify content space between. The effect is that justify content space between doesn't override the original centering but instead applies additional to the original style. The result is items disappearing off the screen. Examples:
Original style:
.header {
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: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-moz-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
}
Then apply a media query:
.header {
-webkit-box-pack: justify;
-moz-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
The result is not what you would expect, as if you set justify content space between on the original style. Instead its as if center is still applied, and it tries to justify content space between ontop of the centering already happening, instead of removing centering and applying justify content space between.