How to align elements within a DIV to the left of it

Question

How to align elements within a DIV to the left of it

Navigation

#1 by (3 votes)

2

I'd like it to look this way:

.episodesContainer
{
    width: 90%;
    height: auto;
    background: rgba(105, 203, 115, 0.5);
    margin-top: 40px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 4px;
    padding-bottom: 4px;
}
.episode
{
    width: 45px;
    height: 45px;
    background: #76c764;
    margin: 4px;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 14pt;
    font-family: "Futura"; 
    border-color: #AAFCB8;
    cursor: pointer;
    outline: none;
}

<div class="episodesContainer">
  <input type="button" class="episode" value="01">
  <input type="button" class="episode" value="01">
  <input type="button" class="episode" value="01">
  <input type="button" class="episode" value="01">
  <input type="button" class="episode" value="01">
  <input type="button" class="episode" value="01">
  <input type="button" class="episode" value="01">
  <input type="button" class="episode" value="01">
  <input type="button" class="episode" value="01">
  <input type="button" class="episode" value="01">
  <input type="button" class="episode" value="01">
  <input type="button" class="episode" value="01">

</div>

css

asked by anonymous 05.05.2017 / 19:44

1 answer

Delete item from an Inioc array 2 How to put cursor: move in a draggable div with javascript?

score 3 · Accepted Answer

Changing the property justify-content to left:

justify-content: left;

.episodesContainer
{
    width: 90%;
    height: auto;
    background: rgba(105, 203, 115, 0.5);
    margin-top: 40px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: left;
    flex-wrap: wrap;
    padding-top: 4px;
    padding-bottom: 4px;
}
.episode
{
    width: 45px;
    height: 45px;
    background: #76c764;
    margin: 4px;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 14pt;
    font-family: "Futura"; 
    border-color: #AAFCB8;
    cursor: pointer;
    outline: none;
}

<div class="episodesContainer">
  <input type="button" class="episode" value="01">
  <input type="button" class="episode" value="01">
  <input type="button" class="episode" value="01">
  <input type="button" class="episode" value="01">
  <input type="button" class="episode" value="01">
  <input type="button" class="episode" value="01">
  <input type="button" class="episode" value="01">
  <input type="button" class="episode" value="01">
  <input type="button" class="episode" value="01">
  <input type="button" class="episode" value="01">
  <input type="button" class="episode" value="01">
  <input type="button" class="episode" value="01">

</div>