Как растянуть блок на всю ширину?

Question

[Hiroshima]

Недо код:

<form name="filters" autocomplete="off" class="filters">
                    <div class="pole-f-1">
                        <div class="box-p-1">
                            <button type="button" class="but-p">Марка
                                <img src="/images/icon/strelka.svg" class="strelka">
                            </button>
                        </div>

                        <div class="box-p-1">
                            <button type="button" class="but-p">Модель
                                <img src="/images/icon/strelka.svg" class="strelka">
                            </button>
                        </div>

                        <div class="box-p-1">
                            <button type="button" class="but-p">Поколение
                                <img src="/images/icon/strelka.svg" class="strelka">
                            </button>
                        </div>
                    </div>
                </form>

.pole-f-1 {
                display: flex;
            }
            
            .box-p-1 {
                position: relative;
                display: flex;
                justify-content: center;
            }
            
            .but-p {
                font-size: 14px;
                height: 30px;
                text-align: left;
                padding: 2px 0px 2px 10px;
                border: none;
                background-color: #fff;
                outline: none;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin: 0 10px;
            }
            
            .but-p:focus {
                box-shadow: 0 0 10px rgb(255, 255, 255);
                transition: 0.2s;
            }
            
            .strelka {
                width: 15px;
                transform: rotate(180deg);
                transition: 0.3s;
                color: rgb(255, 0, 0);
                padding: 0 20px;
            }
            
            .strelka:hover {
                transform: rotate(0deg);
            }

Answer 1

[Богдан Ерольский]

.pole-f-1 {
    justify-content: space-around;
}

Comments

[Hiroshima]

мне нужно кнопку растянуть на 100%, а она не хочет:

[Богдан Ерольский]

Hiroshima, теперь ясно, что тебе нужно сделать.
Используй свойство align-items с значением stretch.
Не к input, а к блоку pole-f-1

[Hiroshima]

Богдан Ерольский, Извиняюсь может я не правильно объяснил или сделал ?

[Богдан Ерольский]

.pole-f-1 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
}
button {
   width: 100%;
}

Вот ссылка на реализацию:
https://jsfiddle.net/0gcj4Lsv/

Советую поизучать работу с флексбоксами

[Hiroshima]

Богдан Ерольский, я уже решил проблему, там просто надо было убрать box-p-1

[Богдан Ерольский]

Это, конечно, хорошо, однако правильнее в данной ситуации изменить направление главной оси, на которой располагаются элементы, от "слева-направо" к "сверху-вниз" с помощьюflex-direction: column;

Answer 2

[Artem Pyvovar]

Форме задай display: block (он по умолчанию в многих браузерах стоит); width: 100%

Comments

[Hiroshima]

не помогло :(

[Artem Pyvovar]

У меня норм, даже скрол появляется.
Ты в хроме запустил ? Или какой-то сторонний источник, ибо он может свои стили накладывать.
Вариант: width: 100%!important; - попробуй так

[Hiroshima]

Artem Pyvovar, Не помогло, наверно у меня другая ситуация