This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 5 years ago.
I have this markup
.course-flex-container {
display: flex;
flex-direction: column;
margin: 5px 5px 5px 5px;
background-color: red;
}
.course-flex-row {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.course-flex-row-2 {
display: flex;
flex-direction: row;
}
<div class="course-flex-container">
<div class="course-flex-row">
<div>edit</div>
<div>delete</div>
</div>
<div class="course-flex-row-2">
<div>Read Chapter 1 to 3</div>
</div>
<div class="course-flex-row">
<div>Blaw 3100</div>
<div>Due Date: 6/29/2017</div>
</div>
</div>
I tried to align the <div>Read Chapter 1 to 3</div> but it won't align to center when I use text-align: center; I tried on the that div and on its parent div.
I removed text-align from my code as it was not working that's why you don't see it.
Use justify-content: center to .course-flex-row-2
.course-flex-container {
display: flex;
flex-direction: column;
margin: 5px 5px 5px 5px;
background-color: red;
}
.course-flex-row {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.course-flex-row-2 {
display: flex;
flex-direction: row;
justify-content: center;
}
<div class="course-flex-container">
<div class="course-flex-row">
<div>edit</div>
<div>delete</div>
</div>
<div class="course-flex-row-2">
<div>Read Chapter 1 to 3</div>
</div>
<div class="course-flex-row">
<div>Blaw 3100</div>
<div>Due Date: 6/29/2017</div>
</div>
</div>
any of the DIVs that you would like to center the content of add
margin: auto;
to the CSS. You can also adjust the top and bottom margin by using
margin: 10px auto; //center with 10px top margin.
or
margin: 10px 10px auto; //center with 10px margin at top and bottom.
however....
text-align: center;
would center text only, not elements inside the div.
Change Like this :
First change className to class.
After Change Like This:
.course-flex-row-2{
display: flex;<-----------------Remove
flex-direction: row;
text-align: center;
}
.course-flex-row-2 div {<--------------Add
display: inline-block;
}
.course-flex-container {
display: flex;
flex-direction: column;
margin: 5px 5px 5px 5px;
background-color: red;
}
.course-flex-row {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.course-flex-row-2{
flex-direction: row;
text-align: center;
}
.course-flex-row-2 div{
display: inline-block;
}
<div class="course-flex-container">
<div class="course-flex-row">
<div>edit</div>
<div>delete</div>
</div>
<div class="course-flex-row-2">
<div>Read Chapter 1 to 3</div>
</div>
<div class="course-flex-row">
<div>Blaw 3100</div>
<div>Due Date: 6/29/2017</div>
</div>
</div>
I usually go with position absolute along with transform for inner div & position relative for outer div.
Check the same example in jsfiddle https://jsfiddle.net/f2vvy6st/
.course-flex-row-2 {
position: relative;
width: 400px;
height: 400px;
border: 1px solid red;
div {
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top:50%;
}
}
put align attribute to the parent div, it should also work, (not recommended but will get you work)
<div className="course-flex-container" align="center">
Related
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
How to Right-align flex item?
(13 answers)
Closed 2 years ago.
I tried to align the Add to library div to the right with float: right style but it does not seem to work. How to align that div to the right of the flex. Could anyone please help?
.song {
display: flex;
flex-direction: row;
border: 1px solid red;
padding: 10px
}
.song-name {
padding: 10px;
display: flex;
align-items: center;
}
.song-action {
padding: 10px;
display: flex;
align-items: center;
color: red;
}
<div class="song">
<div class="album-cover">
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
</div>
<div class="song-name">
Song name
</div>
<div class="song-action">
Add to library
</div>
</div>
Just use margin-left: auto on the element you want shoved to the side. Inside a flex container anything with an auto margin on any side will push it to the farthest opposite side.
.song {
display: flex;
flex-direction: row;
align-items: center;
border: 1px solid red;
padding: 10px
}
.song-name {
padding: 10px;
display: flex;
align-items: center;
}
.song-action {
padding: 10px;
margin-left: auto;
color: red;
}
<div class="song">
<div class="album-cover">
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
</div>
<div class="song-name">
Song name
</div>
<div class="song-action">
Add to library
</div>
</div>
just add margin-left:auto in your add to library div
.song {
display: flex;
flex-direction: row;
border: 1px solid red;
padding: 10px
}
.song-name {
padding: 10px;
display: flex;
align-items: center;
}
.song-action {
padding: 10px;
display: flex;
align-items: center;
margin-left: auto;
color: red;
}
<div class="song">
<div class="album-cover">
<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
</div>
<div class="song-name">
Song name
</div>
<div class="song-action">
Add to library
</div>
</div>
I'm trying to tidy up my code and I have a menu that I would like to organise a little better.
Is there a way of aligning the menu at the start, end or or center while having the last item in the menu aligned to the end?
I've currently stripped out everything and kept the basics. If I remove margin-top: auto from the last div, all items are aligned in the center as stated in the .menu css.
If I keep margin-top: auto from the last div, the last div is aligned where I want it but the other items are aligned at the top and not where it's supposed to.
Here's my code:
HTML
<div class="header">
<div class="one">one</div>
<div class="two">two</div>
</div>
<div class="menu">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
</div>
CSS
.header{
height:70px;
background: red;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
}
.header .one {
background: blue;
display: flex;
align-items: center;
padding: 0.5rem 1rem;
}
.header .two {
background: green;
display: flex;
align-items: center;
padding: 0.5rem 1rem;
}
.menu {
width:70px;
height: 100vh;
background: blue;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
}
.three {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
}
.menu div:last-of-type {
margin-top: auto;
}
Here it is in action: Fiddle
Add the following and this will work. You may want to add a padding to match your header, in this case 70px.
.menu {
padding-top: 70px;
}
.menu div {
margin-top: auto;
margin-bottom: auto;
}
.menu div:last-of-type {
margin-top: auto;
margin-bottom: 0;
}
This question already has answers here:
Center and bottom-align flex items
(3 answers)
Closed 4 years ago.
I have a problem with flexbox. I attempted to align two elements; the one to the top of the container, and another one to the center. Most of the flexbox examples were using three elements, not two elements. So I tried my own solution.
#main {
display: flex;
flex: 1;
flex-direction: column;
justify-content: space-between;
height: 100px;
background-color: #dfdfdf;
}
#box1 {
display: flex;
justify-content: flex-end;
background-color: #ff0000;
}
#box2 {
display: flex;
background-color: #00ff00;
}
#dummy {
display: flex;
opacity: 0;
}
<div id="main">
<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="dummy">dummy</div>
</div>
...and I also applied it to horizontal case.
#main {
display: flex;
flex: 1;
flex-direction: row;
justify-content: space-between;
height: 100px;
background-color: #dfdfdf;
}
#box1 {
display: flex;
justify-content: flex-end;
background-color: #ff0000;
width: 200px;
}
#box2 {
display: flex;
background-color: #00ff00;
width: 100px;
}
#dummy {
display: flex;
opacity: 0;
width: 200px;
}
<div id="main">
<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="dummy">dummy</div>
</div>
However, it needs a useless dummy element. I think it is not a good idea :(
Is there any better way to solve this?
you don't have to add this 'dummy' div. According to me you should keep display flex in you container, but change justify-content: space-between to justify-content: center.
Then simply add position absolute to you first, child element and display it on the top of the container. Also remember to add relative position to your container.
Here is working code:
#main {
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
height: 100px;
background-color: #dfdfdf;
position: relative;
}
#box1 {
display: flex;
justify-content: flex-end;
background-color: #ff0000;
position:absolute;
top:0;
width:100%;
}
#box2 {
display: flex;
background-color: #00ff00;
}
Fiddle: https://jsfiddle.net/95Lwcbuk/1/
If you want to use flex-box only, you could wrap another .container element around each of your boxes, set these to use flex also, but set the first one to justify-content: flex-start, the last one to justify-content: flex-end.
See example
#main {
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
height: 100px;
background-color: #dfdfdf;
}
.container {
flex-basis:50%;
display:flex;
flex-direction:column;
}
.container:first-child {
justify-content: flex-start;
}
.container:last-child {
justify-content: flex-end;
}
#box1 {
background-color: #ff0000;
}
#box2 {
background-color: #00ff00;
}
<div id="main">
<div class="container">
<div id="box1">box1</div>
</div>
<div class="container">
<div id="box2">box2</div>
</div>
</div>
I am trying to achieve what you see at the bottom of the panel in the image below. Each of the 3 items are centered but the text is left aligned.
I have developed the following basic CSS and HTML code. I am trying to use flexbox as much as possible for responsive layout. Anyone have any pure HTML/CSS solution?
I understand that the p tag is a block level element. So what are my options without setting the width of the p tag? Or maybe there is another tag I could use?
The HTML and CSS code I have provided below has the basic structure only.
.panel {
display: flex;
border: 1px solid black;
min-height: 300px;
flex-direction: column;
max-width: 500px;
}
.panel-body {
display: flex;
flex: 1;
flex-flow: row wrap;
justify-content: center;
}
.panel-heading {
padding: 10px 10px;
}
.panel-body div.chart {
flex: 0 0 100%;
min-height: 150px;
background-color: green;
}
.panel-body div {
text-align: center;
flex: auto;
background-color: red;
display: flex;
flex-direction: column;
justify-content: space-around;
}
p {
border: 0;
padding: 0;
margin: 0;
text-align: left;
}
<div class="panel">
<div class="panel-heading">
HEADING
</div>
<div class="panel-body">
<div class="chart"></div>
<div>
<p>HIGH
<br/>144</p>
</div>
<div>MEDIUM
<br/>2</div>
<div>LOW
<br/>3</div>
</div>
</div>
Just changed styles of .panel-body div. Also there is no need for p tag here, consider removing it from markup. Demo:
.panel {
display: flex;
border: 1px solid black;
min-height: 300px;
flex-direction: column;
max-width: 500px;
}
.panel-body {
display: flex;
flex: 1;
flex-flow: row wrap;
justify-content: center;
}
.panel-heading {
padding: 10px 10px;
}
.panel-body div.chart {
flex: 0 0 100%;
min-height: 150px;
background-color: green;
}
.panel-body div {
/* Take 33.33% width, allow grow and shrink */
flex: 1 1 33.33%;
background-color: red;
/* become a flex-container */
display: flex;
/* align flex-items vertically */
flex-direction: column;
/* center vertically */
justify-content: center;
/* center horizontally */
align-items: center;
}
p {
border: 0;
padding: 0;
margin: 0;
text-align: left;
}
<div class="panel">
<div class="panel-heading">
HEADING
</div>
<div class="panel-body">
<div class="chart"></div>
<div>
<p>HIGH
<br/>144</p>
</div>
<div>MEDIUM
<br/>2</div>
<div>LOW
<br/>3</div>
</div>
</div>
Try this HTML code:
<div class="panel">
<div class="panel-heading">
HEADING
</div>
<div class="panel-body">
<div class="chart"></div>
<div><p>HIGH<br/>144</p></div>
<div><p>MEDIUM<br/>2</p></div>
<div><p>LOW<br/>3</p></div>
</div>
</div>
It appears that you originally only put the div containing "HIGH" and "144" in a <p> tag, which, according to your css code, is the attribute that is being styled to have left-aligned text. However, the content within the other 2 <div>s were not enclosed within a <p> tag, and so they were not being styled.
I am using flexbox to center content with justify-content: center which works as intended but flexbox also moves divs to be side by side which I don't want.
Here is an example
.flex {
display: flex;
justify-content: center;
}
.content {
width: 100px;
height: 100px;
background-color: #000;
margin: 10px;
}
<div class="flex">
<div class="content">
</div>
<div class="content">
</div>
</div>
How can I use flexbox while retaining the default one div on top of the other positioning.
You can set flex-direction: column and then you have to use align-items: center. Default flex-direction is row.
.flex {
display: flex;
align-items: center;
flex-direction: column;
}
.content {
width: 100px;
height 100px;
color: #000;
border: 1px solid black;
padding: 5px;
margin: 5px;
}
<div class="flex">
<div class="content"></div>
<div class="content"></div>
</div>
Try following code,
.flex {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.content {
width: 100px;
height: 100px;
background-color: #000;
margin: 10px;
}
<div class="flex">
<div class="content">
</div>
<div class="content">
</div>
</div>