I have created a sub-container, containing two items which I would like to display as flex-direction: row with justify-content: space-between. I can't seem to get it to work.
HTML:
<body>
<div class="container">
<div class="randqg">
<div class="title">Random Quote Generator</div>
<div class="subcontainer">
<i class="fa fa-quote-left fa-3x" aria-hidden="true"></i>
<a class="twitter-share-button" href="https://twitter.com/intent/tweet">Tweet</a>
</div>
<blockquote id="text">Original Text</blockquote>
<div class="subcontainer">
<span id="author">author</span>
<i class="fa fa-quote-left" aria-hidden="true"></i>
</div>
</div>
</div>
</body>
<script src="https://use.fontawesome.com/02b956c77d.js"></script>
CSS:
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-color: blue;
}
.randqg {
display: flex;
align-items: center;
min-height: 24em;
justify-content: center;
flex-direction: column;
width: 500px;
height: 50%;
border: 5px solid red;
}
.title {
}
.subcontainer{
width: 80%;
height: 80%;
flex-direction: column;
justify-content: space-between;
align-items: center;
margin: auto;
}
JS Fiddle: https://jsfiddle.net/3qx8aw44/
I have checked with dev tools that justify-content is applied to the sub-container, so I don't think it a typo error.
I thought it might be an issue of there not being enough free space to distribute between the items. So changed width to be less than 100%.
I checked
It's because you are using display block, you can't use display block, and give flex property like justify-content in the same div, you need to use display flex:
.subcontainer{
width: 80%;
height: 80%;
flex-direction: column;
justify-content: space-between;
align-items: center;
display: flex; /* added */
}
Related
I am trying to achieve this (my Figma mockup):
Where as I keep getting this in my real coding (text is dummy):
This is my (S)CSS for the page:
.navbarcont {
margin-top: 2em;
display: flex;
background-color: hsl(206, 97%, 13%);
border-radius: 34px;
width: 80vw;
height: 3em;
margin-left: auto;
margin-right: auto;
.links {
display: flex;
justify-content: flex-start;
margin-left: 2em;
align-items: center;
}
ul {
display: inherit;
flex-direction: row;
flex-wrap: wrap;
gap: 1em;
}
.langcont {
display: inherit;
justify-content: flex-end;
align-items: center;
}
}
And this is my React HTML:
<div className="navbarcont">
<div className="links">
<ul> {/*TODO: Remember to put icons before the a tags! (USE BOOTSTRAP ICONS!) */}
<li>
Hello
</li>
<li>
Hello
</li>
<li>
Hello
</li>
</ul>
</div>
<div className="langcont">
<div className="langtext">
<p>Language Select</p>
</div>
</div>
</div>
I really do not know where I am going wrong, or why I cannot use justify-content: flex-end; on the langcont class.
Thanks a lot for your help.
You need an additional justify-content in the navbarcontent-class
.navbarcont {
...
justify-content: space-between;
}
This will add space between the two divs and should display your elements like intended.
You have to use justify-content: space-between property on .navbarcont
.navbarcont {
display: flex;
justify-content: space-between;
...
}
I've tried using text-align and justify-content but both of them refuse to work. I think I've made a mistake with all the spacings.
Here's the HTML:
.container1 {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.placeholder {
display: flex;
justify-content: center;
align-items: center;
background-color: #6D747D;
width: 400px;
height: 200px;
}
.contents1 {
display: flex;
margin: 0 auto;
}
<div class="contents1">
<div class="container1">
<h1>This website is awesome</h1>
<p>This website has some subtext that goes hear under the main title. It's a smaller font and the color is lower contrast</p>
<div class="button">Sign up</div>
</div>
<div class="image">
<div class = "placeholder">this is a placeholder for an image</div>
</div>
</div>
Put the justify-contents and align-items into class image
.container1 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.image{
display: flex;
justify-content: center;
align-items: center;
background-color: #6D747D;
width: 400px;
height: 200px;
}
It is a good practice to first add some background-color to better see where each element is and then remove these dumb colors.
For the container which has a display:flex, please add
width:100%;
.container1 {
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 75%;
margin: auto;
}
.placeholder {
display: flex;
justify-content: center;
align-items: center;
background-color: #6D747D;
width: 75%
height: 200px;
margin: auto;
}
.contents1 {
display: flex;
flex-direction: column;
margin: 0 auto;
}
<div class="contents1">
<div class="container1">
<h1 class="center">This website is awesome</h1>
<p class="center">This website has some subtext that goes hear under the main title. It's a smaller font and the color is lower contrast</p>
<div class="button">Sign up</div>
</div>
<div class="image">
<div class = "placeholder">this is a placeholder for an image</div>
</div>
</div>
Assuming you want to center the container1 div with the image placeholder div, the issue is that your divs don't have an assigned with. Set their width to a percentage less than the parent and then use the CSS property margin: auto. You will also need to apply flex-direction: column to your parent div, contents1
.container1 {
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 400px;
margin: auto;
}
.placeholder {
display: flex;
justify-content: center;
align-items: center;
background-color: #6D747D;
width: 400px;
height: 200px;
margin: auto;
}
.contents1 {
display: flex;
flex-direction: column;
margin: 0 auto;
}
<div class="contents1">
<div class="container1">
<h1 class="center">This website is awesome</h1>
<p class="center">This website has some subtext that goes hear under the main title. It's a smaller font and the color is lower contrast</p>
<div class="button">Sign up</div>
</div>
<div class="image">
<div class = "placeholder">this is a placeholder for an image</div>
</div>
</div>
I am trying to use flexbox to design my layout. Basically my goal is: move the button "I am a button" all the way to the right end of the flex container, and keep the other two social buttons at the left side of the container.
<div class="quote-box quote">
<h2>This is where the quote text is going to beThis is where the quote text is going to beThis is where the quote text is going to be</h2>
<p class="quote-writter">Quote writer</p>
<div class="buttons">
<span class="my-button">I am a button</span>
<a href="#" class="tweet-quote-butt"><i class="fa fa-2x fa-twitter"></i>
<a href="#" class="tumblr-quote-butt"><i class="fa fa-2x fa-tumblr"></i>
</a>
</div>
</div>
</div>
Here is the CSS
.wrapper {
max-width:750px;
margin: 0 auto;
display:flex;
align-items:center;
order:1;
}
.quote-box {
background:rgba(255,255,255,0.2);
margin:20px;
padding:20px;
border-radius: 4px;
text-align: center;
flex:1;
display:flex;
flex-wrap:wrap;
}
.quote-box .quote-writter{
display: flex;
justify-content: flex-end;
}
.quote-box .buttons{
display: flex;
justify-content: flex-start;
}
.quote-box > * {
flex:1 1 100%;
}
.quote-box .my-button{
display: flex;
justify-content: flex-end;
width: 100vh;
order:3;
}
.quote-box .my-button .get-quote-butt{
display: flex;
flex-basis: 300px;
align-items: center;
}
PLEASE LOOK AT THIS IMAGE
You can use margin-left:auto, and then adjust your button.
.wrapper {
max-width: 750px;
margin: 0 auto;
display: flex;
align-items: center;
order: 1;
}
.quote-box {
background: rgba(255, 255, 255, 0.2);
margin: 20px;
padding: 20px;
border-radius: 4px;
text-align: center;
flex: 1;
display: flex;
flex-wrap: wrap;
}
.quote-box .quote-writter {
display: flex;
justify-content: flex-end;
}
.quote-box .buttons {
display: flex;
justify-content: flex-start;
}
.quote-box>* {
flex: 1 1 100%;
}
.quote-box .my-button {
display: flex;
justify-content: flex-end;
width: 100vh;
order: 3;
margin-left: auto;
}
.quote-box .my-button .get-quote-butt {
display: flex;
flex-basis: 300px;
align-items: center;
background: #f1f1f1;
justify-content: center;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="quote-box quote">
<h2>This is where the quote text is going to beThis is where the quote text is going to beThis is where the quote text is going to be</h2>
<p class="quote-writter">Quote writer</p>
<div class="buttons">
<span class="my-button">I am a button</span>
<i class="fa fa-2x fa-twitter"></i>
<a href="#" class="tumblr-quote-butt"><i class="fa fa-2x fa-tumblr"></i>
</a>
</div>
</div>
DEMO HERE
I'm trying to achieve the following result using flexbox:
I tried the with the following html but I can't get it to work.
<div class=" flex-center">
<div class="flex-item-center">
<p>
Some text in box A
</p>
</div>
<div class="flex-item-bottom">
<p>Some text in box B....</p>
</div>
</div>
CSS:
.flex-center {
display: flex;
align-items: center;
align-content: center;
justify-content: center;
}
.flex-item-center {
align-self: center;
}
.flex-item-bottom {
align-self: flex-end;
}
How can I make it look like the image?
I've made a posible solution.
.flex-center {
background-color: #739FD0;
color: #000000;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-content: center;
align-items: center;
height: 400px;
}
.flex-center-bottom {
background-color: #739FD0;
color: #000000;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
align-content: center;
align-items: center;
}
.flex-item-center {
border: solid 2px #4675AA;
order: 0;
flex: 0 1 auto;
align-self: center;
}
.flex-item-bottom {
border: solid 2px #4675AA;
order: 1;
flex: 0 1 auto;
align-self: flex-end;
}
<div class="flex-center">
<div class="flex-item-center">
<p>DROP FILES HERE</p>
</div>
</div>
<div class="flex-center-bottom">
<div class="flex-item-center">
<p>Hint: You can also drop files in the all files page</p>
</div>
</div>
Update 2017: Tested in Google Chrome Versión 62.0.3202.89 (Build oficial) (32 bits).
.flex-center,
.flex-center-bottom {
align-items: center;
background-color: #739FD0;
color: #000000;
display: flex;
}
.flex-center {
height: 400px;
justify-content: center;
}
.flex-center-bottom {
justify-content: flex-end;
}
.flex-item-center {
border: solid 2px #4675AA;
font-family: Arial, sans-serif;
font-size: 1.6em;
line-height: 1px;
padding: 0 3px;
}
<div class="flex-center">
<div class="flex-item-center">
<p>Some text in box A</p>
</div>
</div>
<div class="flex-center-bottom">
<div class="flex-item-center">
<p>Some text in box B...</p>
</div>
</div>
I hope this helps you.
Is this what you are looking for? http://jsfiddle.net/DIRTY_SMITH/q12bh4se/6/
body {
background-color: lightblue;
}
#main {
width: 100%;
height: 400px;
border: 1px solid black;
display: -webkit-flex;
/* Safari */
-webkit-align-items: flex-start;
/* Safari 7.0+ */
display: flex;
align-items: flex-start;
}
#main div {
-webkit-flex: 1;
/* Safari 6.1+ */
flex: 1;
}
.flex-item-center {
margin-left: 40%;
border-style: solid;
-webkit-align-self: center;
/* Safari 7.0+ */
align-self: center;
}
.flex-item-bottom {
border-style: solid;
align-self: flex-end;
}
Try:
#main-wrapper {
background: blue;
width: 100%;
height: 100%;
min-height: 300px;
display: flex;
align-items: center;
}
.x-center {
display: flex;
justify-content: center;
}
.y-center {
flex: 1;
}
.x-right {
justify-content: flex-end;
}
.y-bottom {
align-self: flex-end;
}
.small-div {
padding: 10px;
}
<div id="main-wrapper">
<div class="x-center y-center small-div">Center center</div>
<div class="x-right y-bottom small-div">Bottom Right</div>
</div>
Notes:
The align-self won't work for IE10 or below.
Anybody know how to make the center div a bit more to the left without position relativing it? Thanks
In Bootstrap 4.x you can use the utility classes
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-12">
<div class="d-flex justify-content-center h-100">
<div class="d-flex align-items-center">center center</div>
</div>
<div class="d-flex justify-content-end h-100">
<div class="d-flex align-items-end">right bottom</div>
</div>
</div>
</div>
</div>
EDIT
Since I received a couple downvotes I believe a review is in order.
To me the above answer is still valid, however I understand it's not clear it requires some height.
How this height is achieved doesn't really matter. Either you set it fixed in CSS on a wrapper or for the code snippet's sake we set the document's height to make it responsive.
If the "center content" takes up the space in height, the "bottom content" can be positioned absolute, so it doesn't add height. All what's left is to make sure it covers the full width and positions from the bottom.
html, body { height: 100%; } /* can be anything that generates height */
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex justify-content-center h-100">
<div class="d-flex align-items-center">center center</div>
</div>
<div class="d-flex justify-content-end position-absolute w-100 fixed-bottom">
<div class="d-flex align-items-end">right bottom</div>
</div>
So functionality wise, there's no additional CSS required in Bootstrap.
Documentation justify content
Documentation position
I've asked a similar question and tried to modify it's answer for this but I'm not sure what to do.
I have a div of unknown dimensions and I need to place an img, span, or div in one of 9 positions within it.
top left
top middle
top right
center left
center middle
center right
bottom left
bottom middle
bottom right
The question from above works for images but not with anything of unknown dimensions.
I've tried various combinations but cannot figure it out. http://jsfiddle.net/g7hydky2/3/ is what I'm working with.
The only thing I can think of is using display: table and display: table-cell on the outer and inner elements because then I can fully use vertical-align and text-align. However, this seems like a bad hack and I feel like there has to be a better way.
Also, I need this to work on IE 8...
Solved with flexbox,
Acknowledging this article - Getting Dicey with Flexbox
.pip {
width: 10px;
height: 10px;
border-radius: 50%;
background: black;
}
.one {
justify-content: flex-start;
align-items: flex-start;
}
.two {
justify-content: center;
align-items: flex-start;
}
.three {
justify-content: flex-end;
align-items: flex-start;
}
.four {
justify-content: flex-start;
align-items: center;
}
.five {
justify-content: center;
align-items: center;
}
.six {
justify-content: flex-end;
align-items: center;
}
.seven {
justify-content: flex-start;
align-items: flex-end;
}
.eight {
justify-content: center;
align-items: flex-end;
}
.nine {
justify-content: flex-end;
align-items: flex-end;
}
body {
text-align: center;
}
.dice {
width: 50px;
height: 50px;
padding: 5px;
border: 1px solid grey;
border-radius: 15px;
display: inline-flex;
vertical-align: top;
margin: 10px;
}
.pip {
width: 10px;
height: 10px;
border-radius: 50%;
background: black;
}
.one {
justify-content: flex-start;
align-items: flex-start;
}
.two {
justify-content: center;
align-items: flex-start;
}
.three {
justify-content: flex-end;
align-items: flex-start;
}
.four {
justify-content: flex-start;
align-items: center;
}
.five {
justify-content: center;
align-items: center;
}
.six {
justify-content: flex-end;
align-items: center;
}
.seven {
justify-content: flex-start;
align-items: flex-end;
}
.eight {
justify-content: center;
align-items: flex-end;
}
.nine {
justify-content: flex-end;
align-items: flex-end;
}
<div class="dice one">
<div class="pip"></div>
</div>
<div class="dice two">
<div class="pip"></div>
</div>
<div class="dice three">
<div class="pip"></div>
</div>
<div class="dice four">
<div class="pip"></div>
</div>
<div class="dice five">
<div class="pip"></div>
</div>
<div class="dice six">
<div class="pip"></div>
</div>
<div class="dice seven">
<div class="pip"></div>
</div>
<div class="dice eight">
<div class="pip"></div>
</div>
<div class="dice nine">
<div class="pip"></div>
</div>
For absolute certainty {pun intended} and older browswer support use positioning: Codepen Demo