how to make flex-direction row responsive

Question

I'm using this css for a-z list

#a-z {
  float: left;
  width: 100%;
  margin-bottom: 25px;
  display: flex;
  flex-direction: row;
}
ul#a-z li {
  flex-grow: 1;
  padding: 7px;
  text-align: center;
  background: #282c39;
  color: #fff;
  text-transform: uppercase;
  border-left: 2px solid #1d1b24;
}

html

<ul id="a-z">
<li class="active" data-letter="#">#</li>
<li class="active" data-letter=a>a</li>
<li class="active" data-letter=b>b</li>
<li class="active" data-letter=c>c</li>
</ul>

I would like to make it responsive and adaptable to mobile devices, is it possible to find a solution? Thanks in advance

Did you try specifying ```#a-z``` with ```flex-wrap:wrap;``` — Vch Cvh Hvc, Sep 16 '20 at 01:19

score 1 · Accepted Answer · answered Sep 15 '20 at 18:38

1

If only you showed the full content of your HTML but you can wrap your flex item when the container width can't fit the flex children using flex-wrap:wrap; property

answered Sep 15 '20 at 18:38

Ndifreke

732
1
8
13

bad result, first line is good, second line items are too big https://prnt.sc/uhuq9f – pippo Sep 15 '20 at 18:43
@fr0zen, https://stackoverflow.com/q/42176419/3597276 – Michael Benjamin Sep 15 '20 at 18:50

how to make flex-direction row responsive

1 Answers1