Search code examples
flexboxdry

what is the best practice in codes which has multiple display flex

How can I avoid repeating (display:flex, justify-content:center , aign-items:center) in my codes?I want to use them but I don't want to repeat my self (DRY rule). is there any way to define a variable or something which contains those three lines? (WITHOUT USING SASS)

Solution

  • Make a template class for all flexboxes in your code:

    .flexbox {
display: flex;
justify-content: center;
align-items: center;
}
    <div class="flexbox navbar-flexbox">*some text*</div>
<div class="flexbox content-flexbox">*some text*</div>