I'm trying to create a full height header and have one element centre and another element at the bottom.
I have always used position: absolute; to do this, but I would like to use flex instead.
.full-header {
background-color: green;
display: flex;
}
.align-item-center {
background-color: blue;
}
.align-item-end {
background-color: red;
}
<div class="container full-header">
<div class="align-item-center">
Row 1
</div>
<div class="align-item-end">
Row 2
</div>
</div>
I have attached a diagram to help communicate what I'm trying to do. I am also using bootstrap 4, although if someone can point me in the direction of native flex, that would also be great.
You can achieve this by doing the following:
Set the flex-direction of .full-header to column. This will order the child divs from top to bottom
Add an automatic top and bottom margin to .align-item-center. This will ensure that the top and bottom margins of .align-item-center will automatically extend to occupy the available space in .full-header
body {
margin: 0;
}
.full-header {
background-color: green;
display: flex;
flex-direction: column;
height: 100vh;
}
.align-item-center {
background-color: blue;
margin: auto 0;
}
.align-item-end {
background-color: red;
}
<div class="container full-header">
<div class="align-item-center">
Row 1
</div>
<div class="align-item-end">
Row 2
</div>
</div>
Related
I'm asking my first question here, so I apologize in advance if I didn't explain something well.
I'm currently developing portfolio website (Angular 13 with Sass). I've come to a point where I have two divs placed next to each other inside of a flexbox. I use media query (mobile view) to achieve divs to place below each other. One div contains text and other image.
I'm using Sass for flex box
#mixin flex-container($flexdirection, $justifycontent: false) {
#if $justifycontent {
justify-content: $justifycontent;
} #else {
justify-content: center;
}
display: flex;
flex-wrap: wrap;
row-gap: 20px;
align-items: center;
flex-direction: $flexdirection;
}
HTML component looks like this
<div class="about" id="about" #about>
<div class="about__details">
<h1 class="about__title">{{title}}<span class="purple_highlight">A</span>ndjela. <span class="wave">👋</span>
</h1>
<p class="about__paragraph">{{paragraph}}
</p>
<a href="https://drive.google.com/file/d/1PK82zuN4g_Ly5nmNIgRpIsEW9j_gnyaS/view?usp=share_link" target="_blank">
<button class="about__cv_button">My resume</button>
</a>
</div>
<div class="about__img">
<img src="assets/img/profilePicture.png" alt="profile">
</div>
</div>
CSS looks like this
#include mq-between(xs, sm) {
.about {
#include flex-container(row);
height: 100vh;
&__img {
background-color: aqua;
bottom: 0;
right: 0;
flex-shrink: 0;
}
img {
max-width: 100%;
max-height: 100%;
}
&__details {
background-color: blanchedalmond;
left: 10%;
right: 10%;
}
}
}
Result looks like in picture
I've tried using flex-direction as column, flex-basis, max-width, max-height, padding and margin, but nothing seems to make changes for what I'm looking for.
What am I missing to show the divs beneath each other with the correct height?
I have two div, A and B. I would like to put element B above element A using CSS.
I can warp them in a parent div if it's needed.
I have tried several things (float, vertical-align), without success.
What I have:
A
B
What I want:
B
A
Any idea?
Thanks
You can do this with order attribute, whenever you assign a flex display to the parent element.
So in order to do this, you just have to create two div and wrap them within a parent, then make your parent display as flex by then, children of that parent will follow the flex rules. One of the available attributes for flex items is order which you can define for each of the children and gave them sequence number (1, 2, 3, ...) then the child with the lower value will appear first and so on.
.container{
display: flex;
flex-direction: column;
}
.first {
order: 2;
}
.second {
order: 1;
}
<div class="container">
<div class="first">A</div>
<div class="second">B</div>
</div>
Try this with the 2 text divs in a container
body {
font: 400 16px/1.5 sans-serif;
}
.text-wrap {
position: relative;
}
.text-1 {
position: absolute;
top: 1.5em; /* same as line-height */
}
.text-2 {
position: absolute;
top: 0;
}
<div class="text-wrap">
<div class="text-1">
AAA
</div>
<div class="text-2">
BBB
</div>
</div>
.container{
display:flex;
flex-direction: column-reverse;
}
.child{
width: 50px;
height: 50px;
background-color:red;
margin: 10px;
}
<div class="container">
<div class="child">a</div>
<div class="child">b</div>
</div>
Using flex-direction you can move the children of a container
I have no control of the html. I have a parent with multiple children.Only some of them must be in the same row, while the rest of them stay unaffected and one of them must take up all the extra space. Content is auto generated and % is not an option.
Other options except inline to place on the same row to avoid the problem are welcome as well.
.parent {
background: red;
}
.same-row-child {
background: green;
display: inline-flex;
}
<div class="parent">
<div class="other-child">A</div>
<div class="same-row-child">B</div>
<div class="same-row-child">C</div>
</div>
To sum up: Α in the first line unaffected.
B+C in the same line with B taking up all the extra space.
If the idea is to use flex, then it should be the parent the flex box:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
display:flex; display:inline-flex; It enables a flex context for all its direct children.
.parent {
background: red;
display: flex;
flex-wrap: wrap;
}
.other-child {
width: 100%;
}
.same-row-child {
background: green;
}
.parent :last-child {
flex: 1;
margin-left:2px;
}
<div class="parent">
<div class="other-child">A</div>
<div class="same-row-child">B</div>
<div class="same-row-child">C</div>
</div>
looks like not the option you would use See next option
The oldish way is float and overflow, and the one to float is the one that comes first and is supposed to shrink on itself.
see https://css-tricks.com/all-about-floats/
Aside from the simple example of wrapping text around images, floats can be used to create entire web layouts.
.parent {
background: red;
}
.other-child {}
.same-row-child {
float: left;
background: green;
margin-right: 2px;
}
.parent :last-child {
float: none;
overflow: hidden;
margin: 0;
}
<div class="parent">
<div class="other-child">A</div>
<div class="same-row-child">B</div>
<div class="same-row-child">C</div>
</div>
I have a series of full-screen divs in Visual Composer and I want an arrow at the bottom of each one indicating to users they should scroll for more content. I tried absolute positioning on the divs containing the icon with no luck. All I've done is move the icon a few pixels to th
<section class="l-section wpb_row height_full valign_center width_full with_img" id="home">
<div class="l-section-img loaded" data-img-width="1920" data-img-height="809">
</div>
<div class="l-section-h i-cf">
<div class="g-cols vc_row type_default valign_top">
<div class="vc_col-sm-12 wpb_column vc_column_container">
<div class="vc_column-inner">
<div class="wpb_wrapper">
<div class="w-image align_center" id="mainlogo">
<div class="w-image-h"><img src="logo.png" class="attachment-full size-full">
</div>
</div>
<div class="ult-just-icon-wrapper">
<div class="align-icon" style="text-align:center;">
<a class="aio-tooltip" href="#whatis">
<div class="aio-icon none " style="display:inline-block;">
<i class="Defaults-chevron-down"></i>
</div>
</a>
</div></div></div></div></div></div></div>
</section>
Existing CSS:
.aio-icon.none {
display: inline-block;
}
.aio-tooltip {
display: inline-block;
width: auto;
max-width: 100%;
}
.vc_column-inner {
display: flex;
flex-direction: column;
flex-grow: 1;
flex-shrink: 0;
}
.wpb_column {
position: relative;
}
.vc_column_container {
display: flex;
flex-direction: column;
}
.vc_row {
position: relative;
}
.l-section-h {
position: relative;
margin: 0 auto;
width: 100%;
}
The icon itself is the Defaults-chevron-down.
Do you have an idea how to position that icon properly?
I also struggled a little with this. But there is a rather quick and dirty fix for this:
Just put another row below the full height row. Place your icon there and give this element a top margin of i.e. -200px.
For some strange reason the rather logical approach to put the icon in the full height row itself and to position it absolute to the bottom is not properly supported by the source generated from WPB.
I had this issue this week. The way I resolved it was added the icon in that row/section (in my case a single image element with a custom link to a .svg) and added a class to it.
The CSS for the class was then:
position:absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
margin-top:-30px;
(I added a negative margin top as I noticed the icon was cutting of a little on my Google Pixel phone with the fixed bottom bar so that pulled it up a little.)
I have a flexbox container with exactly two children, both of which can have variable content. I want the width of the entire container to fit the width of the first child, but I want the second child's contents to wrap and not cause the container to grow horizontally. See the runnable snippet below for a visual problem description.
Currently looking for a CSS Grid solution. I have found one partial solution, but relies on JavaScript: Make the second child a relative container, put its contents in an intermediate absolutely-positioned container, and use JS to set a fixed height. At least it's good for showing what I'm looking for.
Problem:
.container {
display: inline-flex;
flex-direction: column;
border: 1px solid red;
}
.child {
background-color: wheat;
margin: 5px;
}
<div class="container">
<div class="first child">
This content can grow and be as wide as it wants
</div>
<div class="second child">
This content will also be any size it wants, but I * want it to wrap at the asterisk in this sentence, which is where the first child above would naturally end. This will be its own flexbox container holding several buttons that should wrap onto new rows.
</div>
</div>
JavaScript/absolute solution:
let second = document.getElementsByClassName('second')[0]
let content = document.getElementsByClassName('absolute')[0]
second.style.height = content.offsetHeight + 'px'
.container {
display: inline-flex;
flex-direction: column;
border: 1px solid red;
}
.child {
background-color: wheat;
margin: 5px;
}
.second {
position: relative;
/* height to be set by JS */
}
.absolute {
position: absolute;
width: 100%;
top: 0;
left: 0;
}
<div class="container">
<div class="first child">
This content can grow and be as wide as it wants
</div>
<div class="second child">
<div class="absolute">
This content is longer than the above but still wraps in the right place.
</div>
</div>
</div>
Just set min-width and width of .second:
.container {
border: 1px solid red;
display: inline-block;
padding: 5px;
}
.child {
background-color: wheat;
}
.second {
margin-top: 10px;
min-width: 100%;
width: 0;
}
<div class="container">
<div class="first child">
This content can grow and be as wide as it wants
</div>
<div class="second child">
This content will also be any size it wants, but I * want it to wrap at the asterisk in this sentence, which is where the first child above would naturally end. This will be its own flexbox container holding several buttons that should wrap onto new rows.
</div>
</div>