Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Justify-content not working

Tags:

html

css

flexbox

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

like image 810
Will Avatar asked Oct 17 '22 08:10

Will


1 Answers

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  */
}
like image 122
Risa__B Avatar answered Oct 21 '22 00:10

Risa__B