I'm trying to vertically/horizontally center my Title with the Subtitle directly beneath it. Here was my attempt:
html, body, h1 {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
#container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
<div id="container">
<h1>Main Title</h1>
<span>Subtitle</span>
</div>
As you can see, the subtitle is in the same line as the h1, I'm trying to get it to go beneath it. I've tried setting h1 to display: block; but that seems to not work when using display: flex on the container. Any help would be appreciated.
Set flex-direction: column on container
html, body, h1 {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
#container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
<div id="container">
<h1>Main Title</h1>
<span>Subtitle</span>
</div>
Setting flex-direction to column is one solution. It's already provided in another answer.
In some cases, if flex-direction: row is preferred (or a necessity), you can add flex-wrap: wrap to the container and give the first item a 100% width, which forces the second item to the next line.
body, h1 {
margin: 0;
padding: 0;
}
#container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-wrap: wrap; /* NEW */
align-content: center; /* NEW */
text-align: center; /* NEW */
}
h1 { flex: 0 0 100%; } /* NEW */
<div id="container">
<h1>Main Title</h1>
<span>Subtitle</span>
</div>
Related
I am trying to create a basic slider with 3 slides. The idea is to show the second slide on initial view, if the user swipes left, the slider will show the first slide, if the user swipes right it will show the right slide.
I have the initial slider working but I can't centre it. If I use justify-content on the main wrapper, I'm unable to slide to the first slide.
Here's the code
body {
-webkit-overflow-scrolling: touch;
}
.wrapper {
scroll-snap-type: x mandatory;
scroll-padding: 0px;
scroll-padding-left: 0px;
display: flex;
overflow-x: scroll;
height: 400px;
width: 100vw;
/* justify-content: center; */
}
::-webkit-scrollbar {
display: none;
}
.item {
scroll-snap-align: start;
scroll-snap-stop: always;
flex: 0 0 calc(100vw);
height: 400px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-transform: uppercase;
color: whitesmoke;
font-size: 64px;
}
.item-a {
background-color:green;
flex: 0 0 calc(150px);
}
.item-b {
background-color:red;
}
.item-c {
background-color:blue;
flex: 0 0 calc(150px);
}
<main>
<div class="wrapper">
<div id="item-a" class="item item-a">a</div>
<div id="item-b" class="item item-b">b</div>
<div id="item-c" class="item item-c">c</div>
</div>
</main>
justify-content: center;
with
justify-content: space-between;
I think shoud work for your example.
here is an explaination from developer mozilla site
I am learning to use flexbox and I am not able to align content vertically inside of the class .headercontent. it seems to honor everything else like justify-content but ignores align-content. I searched and found this thread and this seems to suggest that the parent should have height explicitly set. I have set height by setting flex-basis and flex-grow and a min-height. But still by div containing the h1 is stuck to the top of the header. I want that green div to be in the vertical center of the header. what am I doing wrong?
html {
box-sizing: border-box;
margin: 0;
padding: 0;
font-size: 100%;
line-height: 1.2em;
}
body {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
height: 100vh;
background-color: #cdc9c1;
}
header {
background-color: #a99879;
flex-basis: 10%;
flex-grow: 1;
min-height: 20px;
}
main {
background-color: #5b431a;
flex-basis: 80%;
flex-grow: 8;
}
footer {
background-color: #77613c;
flex-basis: 10%;
flex-grow: 1;
}
.headercontent {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background-color: green;
min-height: 20px;
}
.navstyle {
list-style-type: none;
}
<html>
<head>
</head>
<body>
<header>
<div class="headercontent">
<h1>This is the header</h1>
</div>
</header>
<nav>
<ul>
<li>section1</li>
<li>section2</li>
<li>section3</li>
</ul>
</nav>
<main>
<p> this is the main body</p>
</main>
<footer>
<p> this is the footer </p>
</footer>
</body>
</html>
Here is the codeine link to my work https://codepen.io/knows_not_much/pen/rNxXoOM
I want that green div to be in the vertical center of the header. what
am I doing wrong?
Your header element is taking up 10% height of body. Your .headercontent does not take up the entire defined height of the header. Therefore, it is going to sit at the top. To address this, you can assign the header element to be a flex container and that is where you assign align-items: center; justify-content: center properties
header {
background-color: #a99879;
flex-basis: 10%;
flex-grow: 1;
display: flex; /* add these */
align-items: center; /* add these */
justify-content: center; /* add these */
}
Assign width: 100% to the .headercontent afterwards (as needed) if you must have the green background take up the space
Sorry, another flexbox related question :)
I have two flex elements :
A container (red) containing a centered div (yellow)
A footer (blue) with an undefined height
The red container has a flex-grow:1 attribute, forcing it to take the remaining space on the screen
The issue happens when the yellow element is bigger than the screen size. I would like my red container to grow based on its content. Any idea of how I could do that ?
HTML:
<div class="container">
<div class="content"></div>
</div>
<div class="footer"></div>
CSS:
body,
html {
margin: 0;
height: 100%;
display: flex;
flex-direction: column;
}
.container {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
background: red;
}
.content {
background: yellow;
height: 2000px;
width: 100px;
}
.footer {
flex-shrink: 0;
height: 50px;
background-color: blue;
}
https://codepen.io/stepinsight/pen/roRVGQ
== EDIT ==
Andre helped me find the answer, thanks heaps !
The only thing you need to change in the code above is to replace height by min-height and the % by vh for the body/html tags 🎉
body,
html {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}
Simply remove the height property on the body element and add height: 100% to html
* { box-sizing: border-box; }
html {
height: 100%
}
body {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
}
.container {
display: flex;
align-items: center;
justify-content: center;
background: red;
}
.content {
background: yellow;
height: 2000px;
width: 100px;
}
.footer {
height: 50px;
background-color: blue;
}
Corrected: https://codepen.io/ferreirandre/pen/maoVvb
Feel free to play around with the height of .content
i have doing my portfolio but i'm not good with CSS.
I'm using the Flexbox to do the design desktop and mobile but it not working...
It is like this, as i want, using flex-direction: column,:
Code of the div parent:
display: flex;
justify-content:center;
align-items:center;
background-color:#C4C4C4;
min-height: 100vh;
flex-direction: column;
But when i put in responsive, it stay like this:
The elements outside of div parent..
The code is the same, only changes the background-color.
background-color: red;
width:800px;
height:650px;
margin: 30px;
It not stay corrects.
If i dont use the flex-direction: column, it stay like this:
Someone why?
Your main issue was missing max-width: 100%; in the children so the width:800px would not overflow the container parent, take a look at the snippet
section {
display: flex;
justify-content: center;
align-items: center;
background-color: #C4C4C4;
min-height: 100vh;
padding: 15px 30px;
box-sizing: border-box;
}
#media(max-width:800px) {
section {
flex-direction: column;
}
}
div {
max-width: 100%;
width: 800px;
height: 650px;
margin: 15px
}
div:first-of-type {
background-color: red;
}
div:last-of-type {
background-color: blue
}
<section>
<div>red</div>
<div>blue</div>
</section>
max-width not set the width of the children elements.
Make sure you set a width to all of your containers; it looks like you want the gray container to fill the viewport, and the blocks to be evenly distributed.
Here's a working example:
.container {
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
text-align: center;
background-color: gray;
width: 100vw;
height: 100vh;
}
.block {
background-color: #C4C4C4;
min-height: 33vh;
width: 90vw;
}
<div class="container">
<div class="block" style="background-color: red">
A
</div>
<div class="block" style="background-color: blue">
B
</div>
</div>
This question already has an answer here:
Remove space (gaps) between multiple lines of flex items when they wrap
(1 answer)
Closed 4 years ago.
enter code hereI can't really explain it better than this code example.
https://codepen.io/anon/pen/BYeger
I want to make #thing_down_here touch #thing_up_here, but I can't figure out the right combination.
html, body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box
}
#parent {
width: 100vw;
height: 100vh;
background: cornsilk;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#thing_up_here {
flex: 1 0 100%;
background: skyblue;
height: 80px;
}
#thing_down_here {
flex: 0 0 50%;
background: lightgreen;
height: 100px;
}
<div id="parent">
<div id="thing_up_here"></div>
<div id="thing_down_here"></div>
</div>
You need to use use the align-content property to set the distribution along the cross-axis.
html, body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box
}
#parent {
width: 100vw;
height: 100vh;
background: cornsilk;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: flex-start;
}
#thing_up_here {
flex: 1 0 100%;
background: skyblue;
height: 80px;
}
#thing_down_here {
flex: 0 0 50%;
background: lightgreen;
height: 100px;
}
<div id="parent">
<div id="thing_up_here"></div>
<div id="thing_down_here"></div>
</div>
Read more about align-content.
Add align-content: flex-start to #parent
This defines the default behaviour for how flex items are laid out along the cross axis on the current line. Think of it as the justify-content version for the cross-axis (perpendicular to the main-axis).
flex-start: cross-start margin edge of the items is placed on the cross-start line
The default is stretch which is causing your issue
More on it at https://css-tricks.com/snippets/css/a-guide-to-flexbox/
html, body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box
}
#parent {
width: 100vw;
height: 100vh;
background: cornsilk;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: flex-start;
}
#thing_up_here {
flex: 1 0 100%;
background: skyblue;
height: 80px;
}
#thing_down_here {
flex: 0 0 50%;
background: lightgreen;
height: 100px;
}
<div id="parent">
<div id="thing_up_here"></div>
<div id="thing_down_here"></div>
</div>