CODEWITHSUNDEEP
cssflexbox
Stefan Walther
Stefan Walther

Reputation: 938

Dynamically align item with CSS

I would like to align a div in the parent container by allowing the user to select the following options:

While I find a lot of resources how to vertically and horizontally align using flexbox, I am wondering if somebody has created a simple collection of CSS-classes I could easily apply.

Edit:
The basic markup is very simple, just a button:

<div>
    <div class="btn">This is my button</div>
</div>

Now to get to "Right Middle" I'd ideally to do something like:

<div class="vertical-align-middle horizontal-align-right">
   <div class="btn">This is my button</div>
</div>

Upvotes: 3

Views: 3411

Answers (3)

user663031
user663031

Reputation:

The morass library might be useful.

$ mkdir test-project
$ npm init
$ npm install morass
$ edit index.html
$ serve

where index.html is:

<html>

  <head>
    <style>
      .big { height: 200px; width: 200px; outline: 1px red solid; }
      .small { height: 100px; width: 100px; outline: 1px green solid; }
    </style>
    <link rel='stylesheet' href='./node_modules/morass/dist/index.css'/>
  </head>

  <body>
    <div class='big flex align-left align-bottom'>
                    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
      <div class='small'></div>
    </div>
  </body>

</html>

You can replace align-left with align-center or align-right, and align-bottom with align-middle or align-top, etc.

This morass library is based on what are called "micro-classes". For instance, you could also add a vertical class to make the flex items go top to bottom, or for multiple items, justify to spread them out.

Upvotes: 1

Nhan
Nhan

Reputation: 3905

Take a look at my example, you need to create classes for every position, then use a little jQuery to make it changed dynamically.

(function() {
  $(".select-box").on("change", function() {
    var $selected = $(this).find("option:selected").val();
    $("#content").removeClass().addClass($selected);
  });
})();
.select-box {
  position: absolute;
  top: 100px;
  left: 100px;
}
#content {
  display: flex;
  width: 600px;
  height: 400px;
  padding: 20px;
}
.box {
  width: 50px;
  height: 50px;
  background-color: fuchsia;
}

#content.top-left {
  justify-content: flex-start;
  align-items: flex-start;
}
#content.top-middle {
  justify-content: center;
  align-items: flex-start;
}
#content.top-right {
  justify-content: flex-end;
  align-items: flex-start;
}
#content.left-middle {
  justify-content: flex-start;
  align-items: center;
}
#content.centered {
  justify-content: center;
  align-items: center;
}
#content.right-middle {
  justify-content: flex-end;
  align-items: center;
}
#content.bottom-left {
  justify-content: flex-start;
  align-items: flex-end;
}
#content.bottom-middle {
  justify-content: center;
  align-items: flex-end;
}
#content.bottom-right {
  justify-content: flex-end;
  align-items: flex-end;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<div id="content">
  <div class="box"></div>
</div>
<select class="select-box">
  <option value="top-left">Top Left</option>
  <option value="top-middle">Top Middle</option>
  <option value="top-right">Top Right</option>
  <option value="left-middle">Left Middle</option>
  <option value="centered">Centered</option>
  <option value="right-middle">Right Middle</option>
  <option value="bottom-left">Bottom Left</option>
  <option value="bottom-middle">Bottom Middle</option>
  <option value="bottom-right">Bottom Right</option>
</select>

Upvotes: 1

Nenad Vracar
Nenad Vracar

Reputation: 122087

You can position elements in this way by creating one container element with 3 sub-containers for each row with following css.

display: flex;
flex-direction: column;
justify-content: space-between;

This will position rows at top, middle and bottom of container. Next you can can use this css for each row and that will position divs at left, center and right of row.

display: flex;
justify-content: space-between;


body,
html {
  margin: 0;
  padding: 0;
}
.content {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.row {
  display: flex;
  justify-content: space-between;
}
.box {
  border: 1px solid black;
}
<div class="content">
  <div class="top row">
    <div class="box">Top left</div>
    <div class="box">Top center</div>
    <div class="box">Top right</div>
  </div>
  <div class="middle row">
    <div class="box">Middle left</div>
    <div class="box">Middle center</div>
    <div class="box">Middle right</div>
  </div>
  <div class="bottom row">
    <div class="box">Bottom left</div>
    <div class="box">Bottom center</div>
    <div class="box">Bottom right</div>
  </div>
</div>

If you have single element in container then you can use different combinations of align-items and justify-content to position element but that also depends on flex-direction (by default is row). So for example if you want to position element at bottom-center you can use 

display: flex;
align-items: flex-end;
justify-content: center;


body,
html {
  margin: 0;
  padding: 0;
}
.content {
  height: 100vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.btn {
  border: 1px solid black;
}
<div class="content">
  <div class="btn">Button</div>
</div>

Upvotes: 3

Related Questions