Как расположить flex объекты в определенном промежутке?

Question

.foot_fatfont {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    color: #070716;
    font-size: 15px;
    font-weight: 300;
    font-style: normal;
    text-align: left;
    text-transform: uppercase
}

<div class="container">
                <div class="foot_line"></div>
                <div class="foot">
                    <div class="foot_fatfont">
                        <div class="foot_main">#</div>
                        <div class="foot_secondtext">#</div>
                        <div class="foot_thirdtext">#</div>
                    </div>
                    <div class="foot_smallfont">
                        <div class="foot_fourthtext">#</div>
                        <div class="foot_fivethtext">#</div>
                        <div class="foot_sixthtext">#</div>
                        <div class="foot_seventhtext">#</div>
                        <div class="foot_eighthtext">#</div>
                    </div>
                </div>
            </div>

В чем суть. Имеется код выше, не обращайте внимания на название блоков, поменял их специально. В общем, расположил foot_main, foot_second и foot_third по середине при помощи флексов, дав foot_fatfont значение через justify-content: space-around. Как можно сократить расстояние между этими блоками? Сразу говорю, я новичок, если совершил ошибку в чем-либо, готов выслушать. Заранее спасибо за помощь

Answer 1

Если хотите убрать расстояние между ними - то задайте свойство justify-content: center; (блоку foot_fatfont вместо justify-content: space-around)

Answer 2

.foot_main, .foot_second, .foot_third {
  magrin-top:-2rem; /*I use rem, but you can use px, em or %*/ 
}

Answer 3

Я бы лучше использовал justify-content: center;, а расстояние между блоками задал бы через margin

.blocks {
    display:  flex;
    justify-content: center;
    
    
    width:    100%;
    height:   50px;
    border:   1px solid black;
}

.first, .second, .third {
  display:    inline-block;
  width:      30px;
  height:     30px;
  
  margin-left:  10px;
  margin-right: 10px;
}

.first {
  background: red;
}

.second {
  background: green;
}

.third {
  background: blue;
}

<div class = 'blocks'>
  <div class = 'first'></div>
  <div class = 'second'></div>
  <div class = 'third'></div>
</div>

БЛОГ НА HUSL

Как расположить flex объекты в определенном промежутке?

Ответы (3 шт):