css Question posted in
Some basic documentation can be found here.

Css – Align flex wrapped elements to vertically

I basically have couple of questions with n number of options, these options are under a flex container with flex wrap set to wrap, if the options are getting wrapped i want the wrapped elements to be aligned both vertically and horizontally, is it possible to do this?

.options {
      display: flex;
      flex-wrap: wrap;
    }
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <form class="questions">
    <fieldset>
      <legend>This is question 1</legend>
      <div class="options">
        <label for="1_0">
          <input id="1_0" type="radio" />
          <span>option 1</span>
        </label>
        <label for="1_1">
          <input id="1_1" type="radio" />
          <span>option 2</span>
        </label>
      </div>
    </fieldset>
    <fieldset>
      <legend>This is question 2</legend>
      <div class="options">
        <label for="2_0">
          <input id="2_0" type="radio" />
          <span>Lorem ipsum dolor sit amet</span>
        </label>
        <label for="2_1">
          <input id="2_1" type="radio" />
          <span>consectetur adipiscing elit</span>
        </label>
        <label for="2_2">
          <input id="2_2" type="radio" />
          <span>consectetur adipiscing elit, sed do</span>
        </label>
        <label for="2_3">
          <input id="2_3" type="radio" />
          <span>consectetur</span>
        </label>
      </div>
    </fieldset>
  </form>
</body>

</html>

in this example, is it possible to make second questions 2nd and 4th option to start from same line ?

Thanks in advance.

Tags:

2

Answers


  1. 0

    This is the easiest way to get alignment. Set the fieldsets to be 100% wide and then have each one insdie be 50% wide. if you want rows of 3 do 33%, 4 25% etc.

    .options {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
label {
  width: 50%;
}
fieldset { 
  width: 100%;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <form class="questions">
    <fieldset>
      <legend>This is question 1</legend>
      <div class="options">
        <label for="1_0">
          <input id="1_0" type="radio" />
          <span>option 1</span>
        </label>
        <label for="1_1">
          <input id="1_1" type="radio" />
          <span>option 2</span>
        </label>
      </div>
    </fieldset>
    <fieldset>
      <legend>This is question 2</legend>
      <div class="options">
        <label for="2_0">
          <input id="2_0" type="radio" />
          <span>Lorem ipsum dolor sit amet</span>
        </label>
        <label for="2_1">
          <input id="2_1" type="radio" />
          <span>consectetur adipiscing elit</span>
        </label>
        <label for="2_2">
          <input id="2_2" type="radio" />
          <span>consectetur adipiscing elit, sed do</span>
        </label>
        <label for="2_3">
          <input id="2_3" type="radio" />
          <span>consectetur</span>
        </label>
      </div>
    </fieldset>
  </form>
</body>

</html>
    Login or Signup to reply.
  2. 0

    Don’t use flexbox, CSS-Grid can do the job

    .options {
  display: grid;
  grid-template-columns: auto 1fr;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <form class="questions">
    <fieldset>
      <legend>This is question 1</legend>
      <div class="options">
        <label for="1_0">
          <input id="1_0" type="radio" />
          <span>option 1</span>
        </label>
        <label for="1_1">
          <input id="1_1" type="radio" />
          <span>option 2</span>
        </label>
      </div>
    </fieldset>
    <fieldset>
      <legend>This is question 2</legend>
      <div class="options">
        <label for="2_0">
          <input id="2_0" type="radio" />
          <span>Lorem ipsum dolor sit amet</span>
        </label>
        <label for="2_1">
          <input id="2_1" type="radio" />
          <span>consectetur adipiscing elit</span>
        </label>
        <label for="2_2">
          <input id="2_2" type="radio" />
          <span>consectetur adipiscing elit, sed do</span>
        </label>
        <label for="2_3">
          <input id="2_3" type="radio" />
          <span>consectetur</span>
        </label>
      </div>
    </fieldset>
  </form>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search