JSFiddle - React, Tailwind, and code Playground

by SUNGMIN SHIN

HTML

<div class="btn_area">
  <div>
    <h2>flex-direction</h2>
    <button data-attr="flex-direction" data-value="column">flex-direction: column</button>
    <button data-attr="flex-direction" data-value="column-reverse">flex-direction: column-reverse</button>
    <button data-attr="flex-direction" data-value="row">flex-direction: row</button>
    <button data-attr="flex-direction" data-value="row-reverse">flex-direction: row-reverse</button>
  </div>
  
  <div>
    <h2>D(flex가 아닌 엘리먼트) width</h2>
    <button data-target=".not_flex" data-attr="width" data-value="25%">25%</button>
    <button data-target=".not_flex" data-attr="width" data-value="50%">50%</button>
  </div>
  
  <div>
    <h2>D(flex가 아닌 엘리먼트) flex-glow</h2>
    <p>flex-glow는 flex item들이 차지할 너비들에 대한 증가형 숫자를 지정</p>
    <button data-target=".not_flex" data-attr="flex-grow" data-value="">none</button>
    <button data-target=".not_flex" data-attr="flex-grow" data-value="1">1</button>
    <button data-target=".not_flex" data-attr="flex-grow" data-value="2">2</button>
    <button data-target=".not_flex" data-attr="flex-grow" data-value="3">3</button>
    <button data-target=".not_flex" data-attr="flex-grow" data-value="4">4</button>
  </div>


</div>
<!-- .btn_area -->


<!-- #flexBox(flex 컨테이너) -->
<div id="flexBox">
  <div class="flex">A</div>
  <div class="flex">B</div>
  <div class="flex">C</div>
  <div class="not_flex">
    D<br>
    (flex값이 지정되지 않음)
  </div>
</div>
<!-- // #flexBox -->

CSS

#flexBox{display:flex;width:580px;padding:10px;border:1px solid red}
#flexBox div{text-align:center}
#flexBox .flex{flex:1;margin:5px;background:#ccc}
#flexBox .not_flex{background:#000;color:#fff}

.btn_area{
  padding:20px;
  margin-bottom:20px;
  border-bottom:1px dotted gray;
}

JavaScript

$('.btn_area button').on('click', function(){
	
	var targetEle = $(this).data('target') || '#flexBox';
  var attrName = $(this).data('attr');
  var attrValue = $(this).data('value');
  
  $(targetEle).attr('style', attrName + ':' + attrValue);
});