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;
}
Related
Prerequisites
It is not possible to place .header_nav-li_bicycle to the right inside a .header_wrapper.
Expected value
Place .header__nav-li_bicycle to the right inside a .header_wrapper
Reproduction procedure
Run the code bellow, please.
<div class="header__wrapper">
<img class="header__profile-icon" src="image/logo.svg" alt="プロフィール">
<nav class="header__nav">
<ul>
<li class="header__nav-li">About</li>
<li class="header__nav-li_bicycle">Bicycle</li>
</ul>
</nav>
</div>
.header {
/* omitted */
.header__wrapper {
display: flex;
align-items: center;
padding: 0px 76.1094px;
margin: 0px 471.5px;
gap: 30vw;
img {
justify-content: space-between;
width: 120px;
height:40px;
}
nav {
justify-content: space-between;
width: 149.39px;
ul {
display: flex;
.header__nav-li {
height: 21px;
display: flex;
justify-content: flex-end;
.header__nav-link {
/* Omitted */
}
}
.header__nav-li_bicycle {
height: 21px;
display: flex;
justify-content: flex-end;
.header__nav-link_bicycle {
/* Omitted */
}
}
}
}
}
}
Those Classes 😵
Okay so, after spending 5 minutes to understand what's going on cuz of those lengthy classNames. ( Yes, I wrote ClassNames on purpose cuz I got a fetish for React. )
The pen for the following example: https://codepen.io/devshot-dotcom/pen/wvrPZZm
Now, lemme tell you something, mate, there're some real issues going on here, let's solve them one after the other.
The header:-
Why do you need this class, when you can use the HTML header element to do the exact same thing? Now the header (previously .header__wrapper) needs some CSS, here's all you need to vertically align and push the children to opposite edges:
header {
display: flex;
align-items: center;
justify-content: space-between;
/* Continue with padding or margin or whatever. */
}
The Image:-
For the image, all you need is the width and height:
img {
width: 120px;
height: 40px;
}
The nav:-
For the nav, consider assigning a single rule:
nav {
flex-grow: 1;
/* Will make it fill the remaining space of the header. */
}
The list:-
Now, the ul needs to replicate the exact styles of the header, i.e To become a flexbox and vertically align its children, hence:
nav ul {
display: flex;
align-items: center;
}
Actual Problem:-
To make the .bicycle stick to the very right:
nav ul {
display: flex;
align-items: center;
justify-content: space-between
}
To make both of the list items stick to the right:
nav ul {
display: flex;
align-items: center;
justify-content: flex-end
}
This will solve (hopefully) all the problems.
Tips & Tricks
When you're using SASS, the BEM naming convention is quite an overkill. Instead, assign a class to the very parent of a block, say .stick-man and then nest all the children as they're nested in the HTML, and you'll save yourself a ton of time and headache. (Yes, naming the classes is a headache.)
I have this <h4> tag:
<h4>
A Java and Kotlin coder.
</h4>
which has this CSS applied to it (inherited from body):
body {
font-family: jetbrains-mono;
background-color: #444;
color: #EEEEEE;
font-size: 18px;
max-width: 650px;
line-height: 1.2;
display: grid;
align-items: center;
margin: auto auto;
}
Here is the result:
using just align-content: center yields the same result.
Problem is, if I use a flexbox to center the text instead of a grid, like this:
display: flex;
align-items: center;
justify-content: center;
this is what happens:
How can I fix this?
the full html file is here: https://github.com/TheOnlyTails/theonlytails.com/blob/main/index.html
and the full css file is here: https://github.com/TheOnlyTails/theonlytails.com/blob/main/style.css
For this to become a column you need the flex-direction: column; property. Add it to the container to which you added the display: flex property like so:
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
I hope this fixes your problem.
I have editable content div with emojiareaone integrated
To center the content i used
{
display: flex;
flex-direction: column;
align-items: center;
align-content: center;
text-align: center;
}
it displays test in right positions but
all emojis tags in separate rows
is there any way to display as it was entered
You Can try This .
emoji-tag {
display:inline-block;
float:left;
}
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 */
}
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>