Help us understand the problem. What is going on with this article?

CSS resizeプロパティで要素をリサイズ可能にする。

More than 3 years have passed since last update.

resize プロパティについて

要素のリサイズ機能を制御するプロパティ。

指定可能な要素は、overflowvisibleと指定されていない要素です
visibleは初期値なので、違う値に設定します。

resize: キーワード値;

  • 使用できるキーワード値

    • none リサイズ機能を無効(初期値)
    • both 水平垂直(全)方向にリサイズを可能にします。
    • horizontal 水平方向のみリサイズを可能にします。
    • vertical 垂直方向のみリサイズを可能にします。

など 他にも幾つかありますが省略します

要素の右下にリサイズ用の領域が設けられます。

sample.png

右下に棒が2本あります これがリサイズ領域です。
ここをドラッグすると、リサイズができます。

sample

※ サンプルでは リサイズ領域のデザインを変えています。

<div id="flex">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

#flex{
  display: flex;
  flex-flow: row nowrap;

  width: 300px;
  height: 100px;
  background-color: #080808;
}

#flex div{ 
  flex: 1 1 auto;

  font-size: 2em;
  color: white;

  /* テキストを中央寄せ */
  text-align: center;
  line-height: 100px;
}

#flex :nth-child(1){
  background-color: blue;
}

#flex :nth-child(2){
  position: relative;

  /* 水平垂直方向にリサイズ可能 */
  resize: both;

  /* resizeを指定するため 'visible'以外を指定 */
  overflow: hidden;
  background-color: red;
}

/* リサイズ領域のデザイン */
#flex :nth-child(2):before{
  content: '';
  position: absolute;
  bottom: 0; right: 0;

  width: 16px;
  height: 16px;
  background-image: linear-gradient(135deg, red 50%, black 50%);

  /* カーソルを分かり易くする */ 
  cursor: nwse-resize;
}

#flex :nth-child(3){
  background-color: green;
}

sample.gif

A や C が伸び縮みしているのは flexboxの仕様です。

垂直方向に伸ばすと親要素の高さを超えられるので注意。
親の高さをリサイズに合わせる場合

親の要素に対して...

parent{
  height: auto; 
}

と指定で、リサイズにも対応可能です。

sample2.png

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away